Per realizzare una
checkbox list in
Knockout JS bisogna prima predisporre un
view model (vm) con 2 proprietà
items e
selectedItems:
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:
<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
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