敲除checkedValue绑定不显示检查

问题描述：

我想获得一个基于两个observablearrays检查复选框的列表。第一个有几个programids，第二个将有programids的所有记录。 observablearray的数据都来自数据库。敲除checkedValue绑定不显示检查

基本上我试图获取ProgramID已经分配给ProgramIDs数组中的用户的列表，并将其与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]); 
});

你的句子开头*“我的目标是在这里” *，然后它开始变得非常不清楚。你能改述一下吗？ – Tomalak 2014-12-07 09:26:52

重申希望现在更清楚 – Adrian 2014-12-07 09:32:42

不是，我很害怕。但我觉得你正在试图做错事。你真的*有两个名单，或者你真的有*一个*名单，其中一些项目是检查（“分配”，无论你称之为），而其他人不是？我想你正试图为一些并不是非常难的问题建立一个令人困惑的用户界面。也许最好描述一下你想要表示的数据，而不是你想要为其构建的UI。 – Tomalak 2014-12-07 09:38:05

答

您的视图模型ProgramIDs属性应该只包含选定的项目，而不是全要素的标识：

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。

答

你没有在你的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

如果你管理显示和编辑选项，他的脚本： ''

敲除checkedValue绑定不显示检查

相关推荐