树形复选框列表中的选定子项

Question

我在javascript中有一个包含复选框项的viewmodel。

Javascript就在这里：

var data = [
    {"name": "Computers", 
       "subcategories":[{"name":"Mac"}, {"name":"Desktop"}]}, 
    {"name": "Mobile Phones" , 
       "subcategories":[{"name":"Nokia"}, {"name":"Sony"}, {"name":"iPhone"}]}
];

var viewModel = {
    categories: ko.observableArray(data),
    selectedCategories: ko.observableArray()
};

ko.applyBindings(viewModel);

HTML代码如下：

<p>Categories: </p>
<div data-bind="foreach: categories">
    <div>
        <input type="checkbox" data-bind="checked: $parent.selectedCategories, checkedValue: $data.subcategories"/> <label data-bind="text: name"></label>
        <ul data-bind="foreach: subcategories">
            <li><input type="checkbox" data-bind="checked: $root.selectedCategories, checkedValue: $data"/> <label data-bind="text: name"></label></li>
        </ul>
    </div>
</div>

<p>Selected items: </p>
<div data-bind="text: ko.toJSON(selectedCategories)"></div>

当我点击某个类别的主要复选框（计算机）时，子类别（ Mac，桌面）未填充。所以我应该再次clik Mac 和桌面复选框，但是在选定项目中插入重复的记录。

以下是jsfiddle代码。

Answer 1

正在发生的事情是父类别中的checkedValue绑定在检查时将整个subcategories数组存储为对象数组，而我认为您想要发生的是将每个对象存储在单独subcategories个数组。实现此目标的一种方法是使用click处理程序而不是checked和checkedValue。

<强> JavaScript的：

var data = [
    {
        "name": "Computers", 
        "subcategories": [{"name":"Mac"}, {"name":"Desktop"}]
    }, 
    {
        "name": "Mobile Phones" , 
        "subcategories": [{"name": "Nokia"}, {"name": "Sony"}, {"name": "iPhone"}]
    }
];

var viewModel = {
    categories: ko.observableArray(data),
    selectedCategories: ko.observableArray(),
    toggleCategory: function(category, event) {
        var checked = event.target.checked;
        ko.utils.arrayForEach(category.subcategories, function(item) {
            viewModel.selectedCategories.remove(item);
            if(checked) {
                viewModel.selectedCategories.push(item);
            }
        });
        return true;
    },
};

ko.applyBindings(viewModel);

<强> HTML

<p>Categories: </p>
<div data-bind="foreach: categories">
    <div>
        <input type="checkbox" data-bind="click: $root.toggleCategory"/> <label data-bind="text: name"></label>
        <ul data-bind="foreach: subcategories">
            <li><input type="checkbox" data-bind="checked: $root.selectedCategories, checkedValue: $data"/> <label data-bind="text: name"></label></li>
        </ul>
    </div>
</div>

<p>Selected items: </p>
<div data-bind="text: ko.toJSON(selectedCategories)"></div>

请注意视图模型上的新toggleCategory方法和替换旧click: $root.toggleCategory和checked绑定的checkedValue绑定是唯一已更改的部分。< / p>

使用JS小提琴（在Chrome中测试）：http://jsfiddle.net/L2eWg/1/