Question

我使用knockout将JSON obejct映射到用户控件，我有一个单独的复选框列表，他们看起来像

 <input type="checkbox" data-bind="checked: IsEnabled1" />

我有JsonObject

 var viewModel = {
            IsEnabled1 :ko.observable(true),            
            IsEnabled2 :ko.observable(true),
            IsEnabled3 :ko.observable(false)
        };
  ...
  ko.applyBindings(viewModel);

我想添加将检查/取消选中所有其他的全局复选框，我在JavaScript端进行了此更改但是全局复选框更新了UI部分，但是它们来自单独的复选框的数据未映射到JSON对象。 / p>

全局复选框

  $("#GeneralTable thead tr th:first input:checkbox").click(function () {
            var checkedStatus = this.checked;
            $("#GeneralTable tbody tr td:first-child input:checkbox").each(function () {
                this.checked = checkedStatus;                    
            });

        });

在此代码之后，我的JSON对象包含与UI无关的数据。

如何更新JS方面的更改后的所有JSON复选框？

Answer 1

请查看示例：http://jsfiddle.net/MenukaIshan/5gaLjh2c/

我认为这正是你所需要的。所有项目都有IsChecked可观察的属性。 ViewModel包含计算的observable（可读和可写），用于检查或取消选中所有项目。

Answer 2

此处有另一种解决方案http://jsfiddle.net/rniemeyer/kXYuU/

上述解决方案可以通过两种方式进行改进

- 要使空列表的AllChecked为false，我们需要检查长度

- 为长列表选择全部时减少重新计算次数，我们需要添加节流

self.AllChecked = ko.computed({
    read: function() {
        var firstUnchecked = ko.utils.arrayFirst(self.Items, function(item) {
            return item.IsChecked() == false;
        });
        return self.Items.length && !firstUnchecked;
    },
    write: function(value) {
        ko.utils.arrayForEach(self.Items, function(item) {
            item.IsChecked(value);
        });
    }
}).extend({ throttle: 1 });

淘汰检查/取消选中所有组合框

2 个答案: