web-dev-qa-db-ja.com

オブジェクトのリストをチェックボックスのリストにバインドする

次のようなオブジェクトのリストがあり、それぞれにいくつかのフィールドがあります。

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

私はチェックボックスのリストを作成し、各人に1つ、これらの行に沿って何かを作成したいと思います。

<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バインディングのスコープでそれを参照するにはどうすればよいですか？

当然の結果として、バインドされているオブジェクトをどのように参照しますか？ここでは、「this」はオブジェクトではなくウィンドウにバインドされているように見えました。

「 checked knockoutjsサイトのバインディング 」の例では、プリミティブを扱い、名前付きテンプレートを使用しています。オブジェクトと匿名テンプレートを使用してこれを行う方法について混乱しています。

knockout.js
39
Gene Golovchinsky

次のようなことができます：

<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属性は、checkedバインディングが配列に対してバインドされたときに、配列から追加/削除するものを制御します。必要に応じて、実際のオブジェクトを配列に追加する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>
68
RP Niemeyer