knockout.js - 为什么在表行中使用 data-bind ='if' 时会出现 Knockout js 的 ReferenceError

Question

我有点困惑。当我尝试在 td 标记中调用“if:(showActiveOnly)”时，我收到“ReferenceError: showActiveOnly is not defined”，但在它下面我立即放置了 ap 标记作为测试并将其数据绑定设置为“文本: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>

错误：未捕获错误：无法解析绑定。消息：ReferenceError：未定义 showActiveOnly；绑定值：if(showActiveOnly)

标签： knockout.js

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 的原因。在knockoutJS 站点搜索knockout 数据上下文信息，它包含每一个小细节！