knockout.js - Enlazando una lista de objetos a una lista de casillas de verificación

Question

Tengo una lista de objetos, cada uno con algunos campos, como este:

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

Me gustaría crear una lista de casillas de verificación, una para cada persona, algo así:

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

Mi confusión es que en el atributo checkbox data-bind , me gustaría referirme tanto al objeto que se selecciona (es decir, la person o la id la persona), como a la lista de todas las personas seleccionadas. ¿Cómo me refiero a eso en el alcance del enlace foreach ?

Supongo que un corolario es: ¿cómo me refiero al objeto que está vinculado? Aquí " this " parecía estar ligado a la ventana, no al objeto.

El ejemplo del " enlace checked en el sitio knockoutjs " trata con primitivas y usa una plantilla con nombre. Estoy confundido acerca de cómo hacer esto con objetos y con plantillas anónimas.

Answer 1

Puedes hacer algo como:

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

Con este tipo de ViewModel:

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

El atributo de value controla lo que el enlace checked agrega / elimina de un conjunto cuando está vinculado a un conjunto. También podría escribir un dependienteObservable que llene la matriz con los objetos reales, si es necesario.

Ejemplo en vivo:

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>