knockout.js - Knockout checkedValue 绑定(bind)不显示选中

Question

我正在尝试获取基于两个可观察数组进行检查的复选框列表。第一个有几个 programids，第二个有所有 programids 的记录。 observablearray的数据都来自于数据库。

基本上，我试图获取已为 ProgramIDs 数组中的用户分配的程序 ID 列表，并将其与 AllPartnerPrograms 数组的数组进行比较，并显示匹配的那些。

然后我希望能够从新列表中进行检查并将其发送回服务器以使用新的 programid 列表更新用户的数据。

我不确定为什么 checkedValue 绑定(bind)不起作用，或者我不明白如何让它起作用。我创建了一个 fiddle在这里使用相同的代码。

我假设 $root.AllPartnerPrograms将根据 self.ProgramIDs 显示选中的项目数组，但这不会发生。

如果我这样输入代码，它会被检查但不会显示其他记录。

 <input type="checkbox" data-bind="checkedValue: ProgramID, checked: ProgramID" />  

如果我将 foreach 更改为 <!-- ko foreach: AllPartnerPrograms -->然后我得到了其他记录，但仍然没有根据第一个列表进行检查。

我在这里做错了什么？

我的代码

<div id="programs">
<!-- ko foreach: ProgramIDs -->    
<input type="checkbox" data-bind="checkedValue: ProgramID, checked: $root.AllPartnerPrograms" />    
<span data-bind="text: ProgramName"></span>
<!-- /ko -->

查看模型

var objPartnerPrograms;
vmPartnerProgramsModel = function () {
var self = this;

self.ProgramIDs = ko.observableArray(
[{ProgramID: 16002,ProgramName: "Program1"}, 
 {ProgramID: 16003,ProgramName: "Program2"}, 
 {ProgramID: 16005,ProgramName: "Program3"}, 
 {ProgramID: 16006,ProgramName: "Program4"}, 
 {ProgramID: 16011,ProgramName: "Program5"
}]);

self.AllPartnerPrograms = ko.observableArray(
[{ProgramID: 16002,ProgramName: "Program1"}, 
 {ProgramID: 16003,ProgramName: "Program2"}, 
 {ProgramID: 16005,ProgramName: "Program3"}, 
 {ProgramID: 16006,ProgramName: "Program4"}, 
 {ProgramID: 16011,ProgramName: "Program5"}, 
 {ProgramID: 16102,ProgramName: "Program6"}, 
 {ProgramID: 16104,ProgramName: "Program7"
 }]);
};

$(document).ready(function () {
  objPartnerPrograms = new vmPartnerProgramsModel()
  ko.applyBindings(objPartnerPrograms, $("#programs")[0]);
});

Answer 1

您没有在您的 foreach 循环中正确确定您的 observable 范围，它应该通过 $data 访问。

话虽如此，我只会保留一个包含所有选项的可观察列表。扩展此选项以获得一个 bool 值，选中的字段可以正常使用。当您将值保存回数据库时，您可以循环遍历数组并获取已检查的值。

var self = this;
var Program = function(id, name, isChecked) {
    return {
        id: ko.observable(id),
        name: ko.observable(name),
        isChecked: ko.observable(isChecked)
    }
}

self.programArray = ko.observableArray([]);
// populate observable array checking the programs that match in both your lists
self.programArray.push(new Program(1234, 'name', true));

// in page
<!-- ko foreach: programArray -->
    <input type="checkbox" data-bind="checked: $data.isChecked" />
<!-- /ko -->

HTH