javascript - knockout js : Code to bind an object rather than individual values

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 } 的实际对象而不是为值属性序列化它？

Answer 1

当对数组使用 checked 绑定(bind)时，它只适用于基元数组。

一个选项是创建一个计算的可观察对象，它根据选定的 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());

如果你处理的是大量的item，那么你可能希望通过key构建一个对象，它是items的索引，这样就可以循环遍历selectedIds，直接抓取每个对象，减少循环量.

这是一个示例:http://jsfiddle.net/rniemeyer/pQQsY/