Установите флажок "Выбрать все" с помощью Knockout.

Question

У меня есть набор флажков и флажок Выбрать все, реализованный следующим образом с использованием Knockout. Мне нужно, чтобы флажок "Выбрать все" был установлен по умолчанию при загрузке страницы.

$(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>

Когда я выбираю или снимаю флажок или флажок Select All, observableArray, т.е. selectedFactors, изменяется. Теперь мне нужно, чтобы флажок "Выбрать все" был установлен по умолчанию при загрузке страницы, и в выбранном факторе также должны быть все выбранные факторы.

Я новичок в Knockout и не могу узнать, как реализовать это с помощью Knockout. Что если мы как-то явно вызовем функцию selectAll, она выполнит эту работу? Как мне вызвать функцию ko.dependentObservable. Может кто-нибудь, пожалуйста, помогите мне.

Answer 1

Вот несколько иной подход к тому же:

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>