隐藏列的一部分,并使其使用淘汰赛
问题描述:
出现通过鼠标悬停我有一个表:隐藏列的一部分,并使其使用淘汰赛
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
,curCode
selected
和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
内工作。
答
个人而言,我只希望诉诸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;
}
然而,这是一种替代方式,不是真正的解释为什么你的解决方案不起作用。在这里发布的其他答案在解释这个方面做得很好。
我试着按照你的回答。它说“Uncaught TypeError:item.selected不是函数” 我已经在我的课程中添加了该属性 – NoobProgger
@NoobProgger你检查了小提琴吗?你需要改变你的'Vm'。 'selected'应该是'Curriculums'数组中项目的'observable'属性。 '选中:ko.observable(false)' – adiga
是,那个小提琴样本就是我想要实现的。但是当我在我的项目中实现它时,这是错误。我已经宣布选择:ko.observable(false) – NoobProgger