从具有剔除的对象数组创建复选框列表

Question

我想知道使用敲除为对象数组创建绑定到选定列表的复选框列表的正确方法是什么。使用诸如单词列表之类的基本值非常简单，但可以使用对象数组来完成。

这行得通：

<script type="text/JavaScript">
function ViewModel(){
        self.choices = ["one","two","three","four","five"];
            self.selectedChoices = ko.observableArray(["two", "four"]);
            self.selectedChoicesDelimited = ko.dependentObservable(function () {
                return self.selectedChoices().join(",");
            });
}
</script>

<ul class="options" data-bind="foreach: choices">
     <li><input type="checkbox" data-bind="attr: { value: $data }, checked: selectedChoices" /><span data-bind="text: $data"></span></li>
</ul>
<div data-bind="text: selectedChoicesDelimited"></div>

但如果项目是这样的对象，我不知道如何让它工作：

self.choices = [{"Id":1,"Name":"one"},{"Id":2,"Name":"two"}, {"Id":3,"Name":"three"}, {"Id":4,"Name":"four"}, {"Id":5,"Name":"five"}];
self.selectedChoices = ko.observableArray([{"Id":2,"Name":"two"}, {"Id":4,"Name":"four"}]);

最后，我希望能够从在我的 MVC 控制器中创建的 MultiSelectList 对象创建复选框列表并传递给 ViewBag 中的视图。

@ebohlman 关于使用 CheckedValue 的答案是我一直在寻找的。然而，另一个注意事项是，像我上面所做的那样直接指定 SelectedChoices 将不起作用，因为即使它们中的值相同，对象也不等于 Choices 数组中的对象。相反，我添加了代码以在定义后将所选选项推送到 SelectedChoices 数组中：

    self.choices = [{"Id":1,"Name":"one","Selected":true},{"Id":2,"Name":"two","Selected":false}];
self.selectedChoices = ko.observableArray();
$.each(self.choices, function (index, value) {
     if(value.Selected) self.selectedChoices.push(value);
            }); 

Answer 1

使用checkedValue 绑定：

<li>
  <input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedChoices" />
  <span data-bind="text: Name"></span>
</li>

并在计算分隔字符串时选择Name 值：

self.selectedChoicesDelimited = ko.computed(function () {
  return ko.utils.arrayMap(self.selectedChoices(), function(v) {
    return v.Name;
  }).join(",");
});