将对象列表绑定到复选框列表 [英] Binding a list of objects to a list of checkboxes

问题描述

我有一个对象列表，每个对象都有几个字段，像这样:

I have a list of objects, each with a few fields, like this:

function Person(id,name,age) {
    this.id = id;
    this.name = name;
    this.age = age;
}

var listOfPeople = [
    new Person(1, 'Fred', 25),
    new Person(2, 'Joe', 60),
    new Person(3, 'Sally', 43)
];

var viewModel = {
    this.people = ko.observableArray(listOfPeople);
    this.selectedPeople = ko.observableArray([]);
}

我想建立一个复选框列表，每个人一个，类似以下几行:

I would like to build a list of checkboxes, one for each person, something along these lines:

<ul data-bind="foreach: people">
    <li>
        <input type="checkbox" data-bind="value: id, checked: ?">
        <span data-bind="name"></span>
    </li>
</ul>

我的困惑是，在复选框data-bind属性中，我想同时引用被选中的对象(即person或人员的id)以及所有对象的列表.选择的人.我如何在foreach绑定的范围内引用它?

My confusion is that in the checkbox data-bind attribute, I would like to refer to both the object being selected (that is, the person or the person's id), as well as to the list of all selected people. How do I refer to that in the scope of the foreach binding?

我猜想一个推论是:我如何指代被绑定的对象?在这里，"this"似乎绑定到窗口，而不是对象.

I guess a corollary is: how do I refer to the object being bound? Here "this" seemed to be bound to the window, not to the object.

"cockoutjs网站上的 checked绑定的示例涉及并使用命名模板.我对如何使用对象和匿名模板执行此操作感到困惑.

The example of the "checked binding on the knockoutjs site" deals with primitives and uses a named template. I am confused about how to do this with objects and with anonymous templates.

推荐答案

您可以执行以下操作:

<ul data-bind="foreach: people">
    <li>
        <input type="checkbox" 
               data-bind="checkedValue: id, checked: $parent.selectedPeople">
    </li>
</ul>

使用这种ViewModel:

With this kind of ViewModel:

var viewModel = {
    people: ko.observableArray(listOfPeople),
    selectedPeople: ko.observableArray()
};

value属性控制checked绑定绑定到数组时在数组中添加/删除的内容.如有必要，您还可以编写一个dependentObservable，用实际的对象填充数组.

The value attribute controls what the checked binding adds/removes from an array when it is bound against an array. You could also write a dependentObservable that populates the array with the actual objects, if necessary.

实时示例:

function Person(id,name,age) {
    this.id = id;
    this.name = name;
    this.age = age;
}

var listOfPeople = [
    new Person(1, 'Fred', 25),
    new Person(2, 'Joe', 60),
    new Person(3, 'Sally', 43)
];

var viewModel = {
    people: ko.observableArray(listOfPeople),
    selectedPeople: ko.observableArray([1])
};

    
ko.applyBindings(viewModel);

<ul data-bind="foreach: people">
    <li>
        <input type="checkbox" value="" data-bind="checkedValue: id, checked: $parent.selectedPeople"><span data-bind="text: name"></span>
    </li>
</ul>

<hr/>

<div data-bind="text: ko.toJSON($root)"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

这篇关于将对象列表绑定到复选框列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！