隐藏列的一部分，并使其使用淘汰赛

问题描述：

table class="table"> 
    <thead> 
     <tr> 

      <th>ID</th> 
      <th>Description</th> 


     </tr> 
    </thead> 

    <tbody data-bind="foreach: Curriculums"> 
     <tr> 
      <td data-bind="text: ID"></td> 

      <td> 
       <div data-bind="event: { mouseover: toggle, mouseout: toggle }> 
        <span data-bind="text: curCode"></span> 
       </div> 
       <div data-bind="visible: selected"> 
        <span data-bind="text: curDescription"></span> 
       </div> 
      </td>  

     </tr> 
    </tbody> 
</table>

这是我的淘汰赛JS

var Vm = 
{ 

    Curriculums: ko.observableArray([]), 
    ID: ko.Observable(), 

    curCode: ko.observable(), 
    curDescription: ko.observable(), 

    selected: ko.observable(false), 

    toggle: function() { 
     this.selected(!this.selected()); 
    } 
}

我试图加载所有的记录课程表。我成功地检索了它，并在没有鼠标悬停/跳出绑定的情况下显示它。问题是，当我实现了鼠标悬停及移出绑定，淘汰赛将引发一个错误：

Uncaught Error: Unable to parse bindings. 
Message: ReferenceError: toggle is not defined; 
Bindings value: event: { mouseover: toggle}

我怎样才能使这项工作？我躲在curDescription跨度如果鼠标未悬停，并当鼠标悬停到curCode跨度

答

toggle应该$parent为你使用它foreach约束力的内部前缀重新出现。否则，淘汰赛将在Curriculums阵列中的每个项目内寻找功能。

<tbody data-bind="foreach: Curriculums"> 
    <tr> 
     <td data-bind="text: ID"></td> 

     <td> 
      <div data-bind="event: { mouseover: $parent.toggle, mouseout: $parent.toggle }> 
       <span data-bind="text: curCode"></span> 
      </div> 
      <div data-bind="visible: selected"> 
       <span data-bind="text: curDescription"></span> 
      </div> 
     </td>  

    </tr> 
</tbody>

这仍然不会给你预期的结果。 ID,curCodeselected和curDescription应该是Curriculums数组中的项的属性。你并不需要有一个在你Vm

var Vm = { 
    Curriculums: ko.observableArray([{ 
    ID: 1, 
    curCode: "CS101", 
    curDescription: "Why C#?", 
    selected: ko.observable(false) // this needs to be an observable 
    }, { 
    ID: 2, 
    curCode: "CS102", 
    curDescription: "Javascript 101", 
    selected: ko.observable(false) 
    }]), 

    // "item" will have the current "Curriculum" element which triggered the event 
    toggle: function(item) { 
    item.selected(!item.selected()); 
    } 
}

这里有一个fiddle为你测试。仔细阅读淘汰赛文档，并使用一些小提琴来充分理解ko绑定。

在本answer在其他问题中提到，您可以通过纯CSS实现这一目标。但是，重要的是您了解如何绑定在foreach内工作。

我试着按照你的回答。它说“Uncaught TypeError：item.selected不是函数” 我已经在我的课程中添加了该属性 – NoobProgger

@NoobProgger你检查了小提琴吗？你需要改变你的'Vm'。 'selected'应该是'Curriculums'数组中项目的'observable'属性。 '选中：ko.observable（false）' – adiga

是，那个小提琴样本就是我想要实现的。但是当我在我的项目中实现它时，这是错误。我已经宣布选择：ko.observable（false） – NoobProgger

答

个人而言，我只希望诉诸CSS这样一个简单的事情，这不仅是因为它更像是一个视觉的事莫过于程序逻辑：

<table class="table show-on-hover"> 
    <thead>...</thead> 
    <tbody data-bind="foreach: Curriculums"> 
    <tr> 
     <td data-bind="text: ID"></td> 
     <td> 
      <span data-bind="text: curCode"></span> 
      <span class="shown-on-hover" data-bind="text: curDescription"></span> 
     </td> 
    </tr> 
</tbody

CSS：

table.show-on-hover tr .shown-on-hover { 
    visibility: hidden; 
} 

table.show-on-hover tr:hover .shown-on-hover { 
    visibility: visible; 
}

然而，这是一种替代方式，不是真正的解释为什么你的解决方案不起作用。在这里发布的其他答案在解释这个方面做得很好。

隐藏列的一部分，并使其使用淘汰赛

相关推荐