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

У меня есть набор флажков и флажок «Выбрать все», реализованный следующим образом с помощью 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. Кто-нибудь может мне помочь.


checkbox selectall knockout.js
person Arunabh    schedule 24.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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>

person Jeroen    schedule 24.11.2016
comment
Спасибо за вашу помощь, но я не смог понять это и реализовать. Устанавливается ли флажок «Выбрать все» при загрузке страницы? - person Arunabh; 25.11.2016
comment
Должен ли быть выбран вариант «Выбрать все» при загрузке страницы, вероятно, зависит от загружаемых данных, при условии, что ваша страница может сохранять некоторую сторону сервера состояний. Если пользователь ранее выбрал все, то jsonData.selectedFactors будет содержать все коды, и поле «Выбрать все» также станет отмеченным. - person Jeroen; 25.11.2016
comment
Из вашего комментария я понимаю, что все факторы из JSON присваиваются selectedFactors, чтобы он проверял Select All при загрузке страницы. Я уже пробовал его, и он проверяет все и все другие факторы, но его поведение не совсем правильное. Если я сниму флажок, он по-прежнему будет держать флажок «Выбрать все», в идеале он должен снять флажок «Выбрать все», а повторное нажатие на него должно выбрать ранее не отмеченный флажок. - person Arunabh; 25.11.2016
comment
Вы пробовали мой пример? Он действительно ведет себя так, как вы ожидаете. Если вам нужна помощь в решении проблемы, связанной с вашим сценарием, попробуйте указать ее как минимальный воспроизводимый пример в вопросе, в противном случае нам трудно сказать, что не так. - person Jeroen; 25.11.2016
comment
fiddle.jshell.net/likhi1/qFE2C Это скрипт Js, из которого я пытался реализовать флажок Выбрать все. К сожалению, приведенный вами пример мне не подошел. Не могли бы вы предложить решение, изменяющее код, указанный в скрипте js. - person Arunabh; 28.11.2016
comment
Не думаю, что я понимаю ваш вопрос, потому что исправить вашу скрипку, чтобы выбрать все при загрузке, тривиально , но, наверное, не то, что вам нужно? PS. Попробуйте обновить и отредактировать сам вопрос, чтобы прояснить его, и убедитесь, что код тоже присутствует. Если вы отредактируете существенно, он будет сбит, и другие тоже смогут его просмотреть. - person Jeroen; 28.11.2016
comment
Решение, которое вы назвали тривиальным, - это то, что я хочу, и я пытался сделать то же самое в своем исходном коде ранее, но по какой-то причине оно не сработало. Попробую еще раз отредактировать вопрос. Спасибо. - person Arunabh; 28.11.2016