为什么在表行中使用数据绑定 ='if' 时会出现 Mergeout js 的 ReferenceError

Question

我有点困惑。当我尝试在 td 标签中调用"if：(showActiveOnly("时，我收到"引用错误：未定义 showActiveOnly"，但立即在它下面我放置了一个 p 标签作为测试并将其数据绑定设置为"text：showActiveOnly"，这是读取查找。我错过了什么？

var viewmodel = {
userList:UserListViewModel(users),
showActiveOnly : ko.observable(true)
}
ko.applyBindings(viewmodel);
<div>
<div>
<input type="checkbox" data-bind="checked: showActiveOnly" /><p data-bind="text:$data.showActiveOnly"></p>
<table >
<thead>
<tr data-bind="click: sortTable">
<th>
User Name
</th>
</tr>
</thead>
<tbody data-bind="foreach: currentPage ">
<tr data-bind="if:(showActiveOnly)">
<p data-bind="text:showActiveOnly"></p>
<td data-bind="text: Username" style="width: 10%;"></td>
</tr>
</tbody>
</table>

错误：未捕获 错误：无法分析绑定。 消息：引用错误：未定义显示活动; 绑定值：if(显示仅活动(

Answer 1

试试这个：

<tbody data-bind="foreach: currentPage ">
<tr data-bind="if: $parent.showActiveOnly">
<p data-bind="text:showActiveOnly"></p>
<td data-bind="text: Username" style="width: 10%;"></td>
</tr>
</tbody>

由于您使用的是 foreach，因此您正在更改所包含绑定的上下文。 这就是为什么你必须使用$parent或$root。在KNOCKOUTJ网站上搜索挖空数据上下文信息，它包含每一个小细节！

Answer 2

稍微改变了答案。我认为这里的问题我范围/上下文。但也有一个建议，我认为你可能想用这张桌子实现什么。这里演示了使用虚拟元素代替和 tr 元素上的 foreach 而不是 tbody。

我认为你想要的例子。也就是说，如果每个当前页面都有一个可观察的 showActiveOnly。如果每个当前页面上都不存在 showActiveOnly，您可以使用$parent、$parents[index] 或$root来获取该可观察量的正确范围。如此处所述 https://knockoutjs.com/documentation/binding-context.html

<tbody>
<tr data-bind="foreach: currentPage ">
<!-- ko if: showActiveOnly -->
<p data-bind="text:showActiveOnly"></p>
<td data-bind="text: Username" style="width: 10%;"></td>
<!-- /ko -->
</tr>
</tbody>