淘汰checkedValue绑定未显示选中答案

【问题标题】：Knockout checkedValue Binding not showing checked淘汰checkedValue绑定未显示选中
【发布时间】：2014-12-07 17:48:58
【问题描述】：

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

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

【问题讨论】：

你的句子以“我的目标是”开头，然后开始变得很不清楚。请您改写一下好吗？
改述希望现在更清楚
恐怕不是。但我感觉你在做错事。你真的有两个列表，或者你真的有一个列表，其中一些项目被检查（“分配”，不管你怎么称呼它）而其他项目没有？我认为您正在尝试为最初不是很难解决的问题构建令人困惑的用户界面。也许最好描述你想要表示的数据，而不是你想要为它构建的 UI。
让我试着解释一下，不要混淆我和你。从主列表中，我为用户分配了一些程序 ID，例如 16002 到 16011，并将其保存到数据库中。因此，当我编辑用户时，我将拥有程序 ID 列表。现在我希望根据主列表检查这些程序 ID
所以你有一个列表，其中一些项目被检查，而其他项目则没有（显然，每个用户的设置不同，但尽管如此）。像这样的东西，也许？ jsfiddle.net/ekb85ftg/8

标签： knockout.js

【解决方案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

【讨论】：

如果您在脚本中管理显示和编辑选项，此答案也很有效：<script type="text/html" id="edit"> and <script type="text/html" id="display"> 您可以在<td><input type="checkbox" data-bind="checked: $data.IsChecked" disabled /></td> 中添加禁用，它将由 KO 自动管理。

【解决方案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。

【讨论】：