javascript - 检查由 JSON 绑定(bind)的 knockout.js 中的多个复选框

Question

我是 JSON 和 knockout 的新手。我面临的问题是我有一个 JSON 数据集，例如定义了 10 个 bool 值

IsHappy = true;
IsSad = false;
IsAngry = true;

等等。我的 ViewModel 是从 JSON 字符串创建的，我将值绑定(bind)到复选框，如下所示:-

<input type="checkbox" data-bind="checked: IsHappy"/>
<input type="checkbox" data-bind="checked: IsSad"/>
<input type="checkbox" data-bind="checked: IsAngry"/>

我将 ViewModel 转换回 JSON 并使用 ajax 将其保存到服务器。

这一切都工作正常，但我不知道如何实现“全选”功能。我已经阅读了在线示例( http://jsfiddle.net/rniemeyer/eT7xV/ )，其中涉及创建 observableArray 并切换 IsSelected() observable，但在我的例子中，如何将不同的 JSON 属性映射到 IsSelected() 属性，同样如何切换IsSelected() observable 更新原始 JSON 属性。

我尝试使用 jquery 设置 attr('checked') ，但这样做会选中该框，但不会更新 ViewModel，这意味着当我将其转换回 JSON 并将其发布到服务器端时，未检测到任何更改。

Answer 1

您需要有一个属性名称数组(您可以显式列出它们，也可以使用 Object.keys 收集它们)。

然后，当检查您的 allSelected 支票簿时，您将浏览这些属性名称数组并根据 newValue 设置它们:

viewModel.allSelected.subscribe(function(newValue) {
    var _this = this;

    //var checkboexes = ['IsHappy', 'IsSad', 'IsAngry'];
    var checkboexes = Object.keys(_this).filter(function(k) { 
       return k.indexOf('Is') == 0; 
    });

    ko.utils.arrayForEach(checkboexes, function(banner) {        
       _this[banner](newValue); 
    });
}, viewModel);

演示 JSFiddle .