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

发布于 2024-12-29 13:10:18 字数 559 浏览 1 评论 0原文

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

原文

This puts a checkbox next to each item of a list where changing the checked status adds/removes that value from the SelectedItems array:

<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([]);

At any point, SelectedItems contains the ids of the checked items.

What if I wanted the checkbox to add and remove an object to SelectedItems? For example, I want to store an actual object of { id : 3, checked : true } instead of serializing it for the value attribute?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼角的笑意。 2025-01-05 13:10:18

当对数组使用 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());

如果您正在处理大量项目，那么您可能需要构建一个对象，该对象是按键对项目进行索引的对象，以便您可以循环selectedIds并直接获取每个对象以减少循环量。

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

When using the checked binding against an array, it will only work with an array of primitives.

One option is to create a computed observable that builds your array of objects from the selected ids.

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());

If you are dealing with a large number of items, then you might want to build an object that is an index of the items by key, so that you can loop through selectedIds and directly grab each object to reduce the amount of looping.

Here is a sample: http://jsfiddle.net/rniemeyer/pQQsY/

回复收藏 0 原文

秋千易 2025-01-05 13:10:18

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

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

如果您的绑定还包含checkedValue，则这定义了值
由已检查的绑定使用，而不是元素的 value 属性。
如果您希望该值不是 a 以外的值，这很有用
字符串（例如整数或对象），或者您想要设置的值
动态地。

更多详细信息，请参阅文档

With KnockoutJS 3.0.0 you can use the checkedValue parameter:

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

If your binding also includes checkedValue, this defines the value
used by the checked binding instead of the element’s value attribute.
This is useful if you want the value to be something other than a
string (such as an integer or object), or you want the value set
dynamically.