javascript - KnockoutJS 未在复选框列表中选择选中的值

Question

我在复选框列表中选中的绑定(bind)有问题。

JS

function vm() {
    var self = this;

    self.categories = [
        {id: 1, name: "Category 1"},  
        {id: 2, name: "Category 2"},  
        {id: 3, name: "Category 3"}
    ];

    // Assume this item came from server side, 
    // that's why i'm using the mapping plugin here.
    var rawItem = { links: [1] };
    self.item = ko.mapping.fromJS(rawItem);
}

ko.applyBindings(new vm());

HTML

<div data-bind="foreach: categories">
    <div>
        <label>
            <span data-bind="text: name"></span>
            <input class="checkbox" type="checkbox" data-bind="checked: $root.item.links, attr: {value: id}">
         </label>
    </div>
</div>

<div data-bind="text: ko.toJSON(item.links)"></div>

JSFiddle

正如您在 fiddle 中看到的那样，第一个问题是 self.category 项中的“id”属性以某种方式转换为字符串，这导致比较失败。无论如何，将项目 links 转换为字符串也不能按预期工作。

简而言之，目标是:根据categories 数组中的值检查页面加载时的字段。

由于我是从更复杂的场景中重现这一点，所以我添加了映射插件以放入任何可能的因素。

Answer 1

您的 Json 对象有无效键，JSON only allows key names to be strings .这就是为什么您将 id 视为字符串的原因。

HTML

<div data-bind="foreach: categories">
    <div>
        <label>
            <span data-bind="text: name"></span>
            <input class="checkbox" type="checkbox" data-bind="value: id, checked: $root.item">
         </label>
    </div>
</div>

<div data-bind="text: ko.toJSON(item)"></div>

JavaScript

function vm() {
    var self = this;

    self.categories = [
        {id: "1", name: "Category 1"},  
        {id: "2", name: "Category 2"},  
        {id: "3", name: "Category 3"}
    ];

    // Assume this item came from server side, 
    var rawItem = { links: ["1"] };
    self.item = ko.observableArray(rawItem.links);
}

ko.applyBindings(new vm());

这是 jsfiddle