Question

我在复选框列表中遇到了检查绑定的问题。

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

正如你在小提琴中看到的那样，第一个问题是来自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

Answer 2

那里有两个问题。

1）投射到字符串

<input class="checkbox" type="checkbox" data-bind="checked: $root.item.links, value: id">

＆＃34;价值＆＃34;在比较之前，绑定以某种方式由KO本身转换为字符串。事实上，如果我尝试使用类别ID的整数值和项链接的字符串值，则检查的bingind正在工作。您可以看到此here

似乎id属性（用于检查category.id == item.links[i]是否已被投放）将比较转换为"1" == 1 item.links = [1, 2, 3]或"1" == "1"之类的内容如果item.links = ["1", "2", "3"]，即使每个category.id都是整数。

2）绑定顺序

如果在值checked之前声明binding绑定，则在第一个值更改后发生检查操作。 See here：与工作代码的唯一区别是value出现在checked之前。尝试加载那个小提琴并检查选项3.

所以，为了解决这些问题，

item.links值必须为字符串
正确的绑定顺序是值：id，已检查：$ root.item.links

KnockoutJS未选中复选框列表上的选中值

2 个答案: