Question

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

这有效：

<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(",");
});

使用knockout从对象数组创建复选框列表

1 个答案: