使用 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>

当我选择或取消选择任何复选框或 SelectAll 复选框时，observableArray 即 selectedFactors 会发生变化。现在我需要在页面加载时默认选中“全选”复选框，并且 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>