Cochez la case "Sélectionner tout" en utilisant Knockout

Question

J'ai un ensemble de cases à cocher et une case à cocher Sélectionner tout implémentée de la manière suivante en utilisant Knockout. J'ai besoin de la case "Sélectionner tout" à cocher par défaut lors du chargement de la page.

$(document).ready(function(){ 
    viewModel=new model(ko,$); 
    ko.applyBindings(viewModel); 
}); 

function model(ko,$){ 
    var jsonResponse= $.parseJSON(response); 

    this.factors=ko.observableArray(jsonResponse["factors"]); 
    this.selectedFactors=ko.observableArray(); 

    this.selectAll = ko.dependentObservable({ 
     read: function() { 
      return this.selectedFactors().length === this.factors().length; 
     }, 
     write: function(newValue) { 
      this.selectedFactors(this.selectedFactors().length === this.factors().length ? [] : this.factors().slice(0)); 
     }, 
     owner: this 
    }); 

}

HTML:

<table> 
    <tr> 
     <td><input type="checkbox" id="selectAll" data-bind="checked: selectAll" />Select All</td> 
    </tr> 
</table> 
<table data-bind="foreach: factorsSplitJsonArray"> 
    <tr data-bind="foreach: $data"> 
     <td> 
      <!-- ko if: $data.hasOwnProperty("factorCode") --> 
      <input type="checkbox" class="jqFactors" id="jqFactors" data-bind="checkedValue: $data, checked: $root.selectedFactors" /> 
      <span data-bind="text: factorDescription"></span> 
      <!-- /ko --> 
     </td> 
    </tr> 
</table> 

Quand je sélectionner ou désélectionner une case à cocher ou la case SelectAll la observableArray-à-dire selectedFactors sont changés. Maintenant j'ai besoin de la case à cocher "Sélectionner tout" pour être sélectionné par défaut lors du chargement de la page et les éléments sélectionnés doivent également contenir tous les facteurs sélectionnés. Je suis nouveau à Knockout et incapable de découvrir comment implémenter cela en utilisant Knockout. Que faire si nous appelons en quelque sorte la fonction selectAll explicitement, fera-t-elle le travail? Comment appeler une fonction ko.dependentObservable. Quelqu'un peut-il m'aider s'il vous plaît.

Answer 1

est ici une approche quelque peu différente pour arriver à la même chose:

var jsonData = { 
 
    allFactors: [ 
 
    { code: "A1", desc: "Alpha one" }, 
 
    { code: "A2", desc: "Alpha two" }, 
 
    { code: "B1", desc: "Beta one" }, 
 
    ], 
 
    
 
    // Simulate that no selection was ever made 
 
    selectedFactors: null // or "undefined" 
 
    
 
    // Unomment this version instead if you want to simulate loading 
 
    // data that was previously selected: 
 
    //selectedFactors: ["A1", "B1"] 
 
}; 
 

 
function ViewModel(data){ 
 
    var self = this; 
 
    
 
    self.factors = ko.observableArray(data.allFactors); 
 
    
 
    function getAllCodes() { 
 
    return data.allFactors.map(function(f) { return f.code; }); 
 
    } 
 
    
 
    self.selectedFactors = ko.observableArray(
 
    data.selectedFactors || getAllCodes() 
 
); 
 
    
 
    self.selectAll = ko.computed({ 
 
    read: function() { 
 
     return self.selectedFactors().length === self.factors().length; 
 
    }, 
 
    write: function(newVal) { 
 
     if (newVal === self.selectAll()) return;  
 
     if (!!newVal) self.selectedFactors(getAllCodes()); 
 
     if (!newVal) self.selectedFactors([]); 
 
    } 
 
    }); 
 
} 
 

 
ko.applyBindings(new ViewModel(jsonData));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<label><input type="checkbox" data-bind="checked: selectAll"> Select All</label> 
 
<hr> 
 
<ul data-bind="foreach: factors"> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" data-bind="checkedValue: code, checked: $root.selectedFactors"> 
 
     <span data-bind="text: desc"></span> 
 
    </label> 
 
    </li> 
 
</ul>