KnockoutJS不选择复选框列表中的选中值

KnockoutJS not selecting checked value on checkbox list

本文关键字：列表 选择 复选框 KnockoutJS      更新时间：2023-09-26

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

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转换为string也不会像预期的那样工作。

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

因为我是从一个更复杂的场景中复制的，所以我添加了映射插件来放置任何可能的因素。

你的Json对象有无效的键，Json只允许键名是字符串。这就是为什么您将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

这里有两个问题。

1)转换为string 

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

"value"绑定在比较之前由KO本身以某种方式强制转换为字符串。事实上，如果我尝试为类别id使用整数值，并为项目链接使用字符串值，则选中的绑定正在工作。你可以在这里看到

似乎用于检查category.id == item.links[i]的id属性被强制转换，将比较转换为"1" == 1(如果item.links = [1, 2, 3])或"1" == "1"(如果item.links = ["1", "2", "3"])，即使每个category.id都是整数。

2)

如果checked绑定在binding之前声明，则检查操作在第一次修改值之后进行。看到这里:与工作代码的唯一区别是value出现在checked之前。试着加载这个文件，并检查选项3。

因此，为了修正这些，

  1. 项目。链接的值必须是字符串
  2. 正确的绑定顺序是:value:id, checked: $root.item.links
相关文章：