knockout.js - 将对象列表绑定(bind)到复选框列表

Question

我有一个对象列表，每个对象都有几个字段，如下所示:

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

我想建立一个复选框列表，每个人一个，大致如下:

<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 绑定(bind)的范围内引用它？

我猜一个推论是:我如何引用被绑定(bind)的对象？这里的“this”似乎绑定(bind)到窗口，而不是对象。

“checked binding on the knockoutjs site”的示例处理基元并使用命名模板。我对如何使用对象和匿名模板执行此操作感到困惑。

Answer 1

你可以这样做:

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

使用这种 ViewModel:

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

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

实例:

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>