web-dev-qa-db-fra.com

Lier une liste d'objets à une liste de cases à cocher

J'ai une liste d'objets, chacun avec quelques champs, comme ceci:

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

Je voudrais construire une liste de cases à cocher, une pour chaque personne, quelque chose comme ça:

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

Ma confusion est que dans la case à cocher data-bind, je voudrais faire référence à la fois à l'objet sélectionné (c'est-à-dire person ou id) de la personne, ainsi qu'à la liste de toutes les personnes sélectionnées. Comment faire référence à cela dans le cadre de la liaison foreach?

Je suppose qu'un corollaire est: comment puis-je me référer à l'objet lié? Ici, "this" semblait lié à la fenêtre, pas à l'objet.

L'exemple de la liaison " checked sur le site knockoutjs " traite des primitives et utilise un modèle nommé. Je ne sais pas comment faire cela avec des objets et des modèles anonymes.

knockout.js
39
Gene Golovchinsky

Vous pouvez faire quelque chose comme:

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

Avec ce type de ViewModel:

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

L'attribut value contrôle ce que la liaison checked ajoute/supprime d'un tableau lorsqu'elle est liée à un tableau. Vous pouvez également écrire un dependObservable qui remplit le tableau avec les objets réels, si nécessaire.

exemple en direct:

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