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

Knockout js: Code to bind an object rather than individual values

本文关键字：单个值 代码 对象 js 用于 绑定 Knockout      更新时间：2023-09-26

这会在列表的每个项目旁边放置一个复选框，在该复选框中，更改选中状态会从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属性序列化它？

对数组使用checked绑定时，它将仅适用于基元数组。

一种选择是创建一个计算的可观察对象，该对象从选定的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());

如果您处理的是大量的项，那么您可能需要构建一个按键索引项的对象，这样您就可以在selectedId中循环，并直接抓取每个对象以减少循环量。

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

KnockoutJS 3.0.0可以使用checkedValue参数：

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

如果绑定还包括checkedValue，则定义值由检查的绑定使用，而不是元素的value属性。如果您希望值不是字符串（例如整数或对象），或者您希望设置值动态地。

文档中的更多详细信息

我们可以像一样使用

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

在复选框中写一个点击事件，为selectedId获取一个selected数据或subscritch方法，并将selectedId的全部细节作为JSON获取，我们必须使用JSON.parse来获取数据。

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

相关文章：