Question

我创建了一个分面搜索页面，允许用户为他们想要过滤的每个构面选择一个复选框。除了一个问题，我已经让它达到了一定程度的工作。用户可以单击“全选”按钮，该按钮将选择所有子项或取消选择所有子项。

我遇到的问题是当用户取消选择其中一个选项时。从那时起，点击全部＆＃39;复选框，它将忽略该选项。我是Knockout的新手，所以这让我陷入了困境。我希望有人可以解释为什么会发生这种情况。

以下是工作/不工作方面的复选框列表：http://jsfiddle.net/thadeus13/ep8rp9gp/1/

我的带有selectAll属性的ViewModel是：

function ViewModel() {
    var self = this;

    var realModel = [];

    ko.utils.arrayForEach(results.ResourceFacets, function (item) {
        realModel.push({
            name: item,
            IsChecked: ko.observable(true)
        });
    });

    self.facets = realModel;

    self.selectAll = ko.computed({
        read: function () {
            var firstUnchecked = ko.utils.arrayFirst(self.facets, function (item) {
                return item.IsChecked() == false;
            });
            return firstUnchecked == null;
        },
        write: function (value) {
            ko.utils.arrayForEach(self.facets, function (item) {
                item.IsChecked(value);
            });
        }
    });
};

Answer 1

你真是太近了！只是在绑定语句中的一个小错字，其中关闭了attr绑定。它应该是：

<input type="checkbox" data-bind="attr: { id: name.replace(' ', '-').toLowerCase()}, checked: IsChecked " />

由于这个错字，然后发生的事情是复选框是由模板绑定呈现的，但每个复选框实际上都没有被绑定到任何东西。所以IsSelected绑定并不像你期望的那样工作，只需浏览器本身就可以在点击每个项目时打开和关闭。

如果你在HTML中使用回车符，我发现它可以帮助跟踪这样的语法错误。这个片段看起来很像：

<input type="checkbox" data-bind="
    attr: {
        id: name.replace(' ', '-').toLowerCase()
    }, 
    checked: IsChecked
" />

它可以帮助您跟踪大括号的位置，特别是在长绑定中。

更正了此修正：http://jsfiddle.net/ep8rp9gp/3/

取消选择observable后，Knockout Select All复选框不起作用

1 个答案: