Question

我正在尝试根据两个observablearrays获取复选框列表。第一个有一些programids，第二个有programid的所有记录。 observablearray的数据都来自数据库。

基本上我正在尝试获取已经为ProgramIDs数组中的用户分配的programid列表，并将其与AllPartnerPrograms数组的数组进行比较，并显示匹配的那些已检查。

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

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

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

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

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

如果我将foreach更改为，那么我会获得其他记录但仍未根据第一个列表进行检查。

我在这里做错了什么？

我的代码

<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访问。

说，我只保留一个包含所有选项的可观察列表。将此选项扩展为具有一个布尔值，使得选中的字段可以正常工作。当您将值保存回数据库时，您可以遍历数组并获取已检查的值。

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

Answer 2

您的视图模型ProgramIDs属性应该只包含所选项目的ID，而不是完整元素：

self.ProgramIDs = ko.observableArray([16002, 16003, 16005, 16006, 16011]);

您还需要绑定到foreach绑定中的完整列表属性，并使用ProgramIds进行检查绑定：

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

查看更新的jsFiddle。

Knockout checkedValue Binding未显示已选中

2 个答案: