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

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/