Checkbox list in Knockout JS

Per realizzare una checkbox list in Knockout JS bisogna prima predisporre un view model (vm) con 2 proprietà items e selectedItems:

JavaScript

document.addEventListener("DOMContentLoaded", function () {

    // dati iniziali
    var exampleItems = [
        { id: 1, description: "Scelta A" },
        { id: 21, description: "Scelta B" },
        { id: 4, description: "Scelta C" }
    ];

    // view-model
    var vm = {
        items: ko.observableArray(exampleItems),
        selectedItems: ko.observableArray()
    };

    // recupero il template della view
    var view = document.getElementById("sgart-app-ko-checkbox-list");

    // binding tra view e view-model
    ko.applyBindings(vm, view);

});
items conterrà tutti gli elementi da visualizzare nella checkbox list, mentre selectedItems conterrà gli id degli elementi selezionati.

Poi va creata la view:

HTML

<script type="text/javascript" src="/lib/knockout.js"></script>

<div id="sgart-app-ko-checkbox-list" class="app-ko">
    <ul data-bind="foreach: items">
        <li>
            <label>
                <input type="checkbox" data-bind="checkedValue: id, checked: $parent.selectedItems">
                <span data-bind="text:description"></span>
            </label>
        </li>
    </ul>
    <div>Selected: <span data-bind="text: selectedItems"></span></div>
</div>

Questo è il risultato:
mentre questo è l'esempio funzionante
Selected id:
Attenzione: Se cliccando su una sola checkbox, vengono selezionati anche tutti gli altri e la proprietà selectedItems contiene on, vuol dire che state usando una versione di Knockout JS vecchia.
Aggiornate la libreria a una versione più recente. Nell'esempio uso la versione 3.5.1
Tags:
Esempi225 JavaScript184 Knockout js8 MVVM6
Potrebbe interessarti anche: