Question

我有点困惑。当我尝试在td标记中调用“ if：（showActiveOnly）”时，出现“ ReferenceError：showActiveOnly未定义”，但是我立即在其下放置了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）

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

Answer 2

改变了答案。我认为这里的问题是我的范围/上下文。但也有一个建议，我认为您可能希望通过这张桌子来达到目的。这里演示了使用虚拟元素代替和在tr元素上代替tbody的foreach。

我想你想要的例子。那就是如果每个currentPage都有一个showActiveOnly观察对象。如果每个currentPage上都不存在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>

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

2 个答案: