knockout selezionare/deselezionare tutti casella combinata

Question

I con eliminazione diretta per la mappatura JSON obejct di controllo utente, ho un elenco di singole caselle di controllo, Sembrano

<input type="checkbox" data-bind="checked: IsEnabled1" /> 

I Have JsonObject

var viewModel = { 
      IsEnabled1 :ko.observable(true),    
      IsEnabled2 :ko.observable(true), 
      IsEnabled3 :ko.observable(false) 
     }; 
    ... 
    ko.applyBindings(viewModel); 

E voglio aggiungere la casella di controllo globale che selezionerà/deselezionerà tutte le altre, ho apportato queste modifiche sul lato JavaScript ma la parte UI dell'aggiornamento della casella di controllo globale ma i dati provenienti da caselle di controllo separate non corrispondono all'oggetto JSON.

casella di controllo globale

$("#GeneralTable thead tr th:first input:checkbox").click(function() { 
      var checkedStatus = this.checked; 
      $("#GeneralTable tbody tr td:first-child input:checkbox").each(function() { 
       this.checked = checkedStatus;      
      }); 

     }); 

dopo questo codice mio oggetto JSON contengono dati che non correlate alla UI.

Come aggiornare tutti i JSON dopo le caselle di controllo delle modifiche dal lato JS?

Answer 1

Si prega di verificare l'esempio: http://jsfiddle.net/MenukaIshan/5gaLjh2c/

Penso che sia esattamente quello che ti serve. Tutti gli articoli hanno proprietà osservabile IsChecked. ViewModel contiene osservabili calcolati (leggibili e scrivibili) per selezionare o deselezionare tutti gli elementi.

Answer 2

Esiste una soluzione alternativa qui http://jsfiddle.net/rniemeyer/kXYuU/

La soluzione sopra può essere migliorata in due modi

-Per rendere AllChecked false per liste vuote, dobbiamo controllare lunghezza

-Per ridurre il numero di ricalcoli quando si seleziona tutto per un lungo elenco, dobbiamo aggiungere il throttle

self.AllChecked = ko.computed({ 
    read: function() { 
     var firstUnchecked = ko.utils.arrayFirst(self.Items, function(item) { 
      return item.IsChecked() == false; 
     }); 
     return self.Items.length && !firstUnchecked; 
    }, 
    write: function(value) { 
     ko.utils.arrayForEach(self.Items, function(item) { 
      item.IsChecked(value); 
     }); 
    } 
}).extend({ throttle: 1 });