Question

这会在列表的每个项旁边放置一个复选框，其中更改已检查状态会从SelectedItems数组中添加/删除该值：

<script type="text/x-jquery-tmpl" id="tmpl">
    <input name="cSelect" 
           type="checkbox"
           value="${ ID }"
           data-bind="checked: VM.SelectedItems" />
    <!-- Add other item content here -->
</script>

VM.SelectedItems = ko.observeableArray([]);

在任何时候，SelectedItems都包含已检查项目的ID。

如果我希望复选框向SelectedItems添加和删除对象怎么办？例如，我想存储{ id : 3, checked : true }的实际对象，而不是为value属性序列化它？

Answer 1

对数组使用checked绑定时，它只能用于基元数组。

一个选项是创建一个计算的observable，用于根据选定的id构建对象数组。

var ViewModel = function() {
    var self = this;
    this.items = [{id: 1, name: "one"}, {id: 2, name: "two"}, {id: 3, name: "three"}];
    this.selectedIds = ko.observableArray();
    this.selectedItems = ko.computed(function() {
        return ko.utils.arrayMap(self.selectedIds(), function(id) {
            return ko.utils.arrayFirst(self.items, function(item) {
                return item.id == id; //selected id will be a string
            }); 
        });
    });                                                           
};

ko.applyBindings(new ViewModel());

如果您正在处理大量项目，那么您可能希望按键构建一个对象的索引，以便您可以遍历selectedIds并直接获取每个对象以减少循环量

以下是一个示例：http://jsfiddle.net/rniemeyer/pQQsY/

Answer 2

使用KnockoutJS 3.0.0，您可以使用checkedValue参数：

<input name="cSelect" type="checkbox" value="${ ID }" data-bind="checkedValue: $data, checked: VM.SelectedItems" />

如果您的绑定还包含checkedValue，则定义该值由checked绑定使用而不是元素的value属性。如果您希望该值不是a，则此选项非常有用字符串（例如整数或对象），或者您想要设置值动态。

documentation

中的更多详细信息

Answer 3

我们可以使用

<input type="checkbox" data-bind="attr: {value: JSON.parse($data).Id}, checked: $root.selectedIds"/>

并在复选框中编写单击事件以获取selectedIds的选定数据或订阅方法，并将选定的id作为JSON获取整个详细信息，我们必须使用JSON.parse来获取数据。

但我不知道如何用JSON存储整个对象。

Knockout js：用于绑定对象而不是单个值的代码

3 个答案: