Блог

Я хотел бы узнать, как контролировать, будет ли состояние флажка (проверено или снято) первоначально применено с предопределенными состояниями или состояниями по умолчанию (снято) в зависимости от состояния некоторой логической переменной

У меня есть код шаблона здесь: http://jsfiddle.net/8sg501yj /

 function DemoItem(id, name, state) {
  var self = this;

  self.id = ko.observable(id);
  self.Name = ko.observable(name);
  self.Selected = ko.observable(state);
}

function ViewModel() {
  var self = this;

  self.availableItems = ko.observableArray([]);


  self.init = function() {
    self.availableItems.push(new DemoItem(1, 'One', true));
    self.availableItems.push(new DemoItem(2, 'Two', true));
    self.availableItems.push(new DemoItem(3, 'Three', false));
    self.availableItems.push(new DemoItem(4, 'Four', true));
    self.availableItems.push(new DemoItem(5, 'Five', true));
  };

  self.relayState = ko.computed({
    read: function() {
      ko.utils.arrayForEach(self.availableItems, function(item) {
        return item.Selected();
      });

    },
    write: function(value) {
      if (value) {
        console.log("associate item ");
      } else {
        console.log("disasociate item ");
      }
    }
  })
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
 

и HTML :

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"> </script>
Available Items:
<div data-bind="foreach: $root.availableItems">
  <input type="checkbox" data-bind="checked: Selected" />
  <span data-bind="text: 'amp;nbsp;'   Name()"></span>
  <br/>
</div>
 

Этот код уже применяет предопределенные состояния. но я хотел бы адаптировать его или изменить так, чтобы у меня была некоторая логическая переменная, и, устанавливая или отключая эту переменную, начальные состояния либо применяются, либо флажки не установлены (по умолчанию)

Перечитав ваш вопрос еще несколько раз, я думаю, что, возможно, вы специально спрашиваете о логическом переключателе для переключения, устанавливаются ли начальные значения или нет. Если это так, вы могли бы просто передать логическое значение вашей init функции, которая контролирует, применяются ли начальные значения.

 function DemoItem(id, name, state) {
  var self = this;

  self.id = ko.observable(id);
  self.Name = ko.observable(name);
  self.Selected = ko.observable(state);
}

function ViewModel() {
  var self = this;

  self.availableItems = ko.observableArray([]);

  self.init = function(applyStates) {
    self.availableItems.push(new DemoItem(1, 'One', applyStates amp;amp; true));
    self.availableItems.push(new DemoItem(2, 'Two', applyStates amp;amp; true));
    self.availableItems.push(new DemoItem(3, 'Three', applyStates amp;amp; false));
    self.availableItems.push(new DemoItem(4, 'Four', applyStates amp;amp; true));
    self.availableItems.push(new DemoItem(5, 'Five', applyStates amp;amp; true));
  };
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init(false); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"> </script>
Available Items:
<div data-bind="foreach: $root.availableItems">
  <input type="checkbox" data-bind="checked: Selected" />
  <span data-bind="text: 'amp;nbsp;'   Name()"></span>
  <br/>
</div> 

На что-то очень похожее уже был дан ответ вчера, так что вам, возможно, потребуется уточнить свой вопрос подробнее, если на него не был дан удовлетворительный ответ, но я попробую ответить на то, что, как мне кажется, вы спрашиваете.

Knockout привязывает вашу модель представления javascript к DOM, чтобы изменения в ваших данных автоматически отражались в пользовательском интерфейсе. Единственное, что вам нужно сделать, это привязать к наблюдаемому, которое у вас есть. Любые изменения в вашем DemoItem.Selected документе приведут к тому, что соответствующие флажки будут установлены / сняты. Если выбрано значение true, то флажок будет установлен как установленный.

но я хотел бы адаптировать его или изменить так, чтобы у меня была некоторая логическая переменная, и, устанавливая или отключая эту переменную, начальные состояния либо применяются, либо флажки не установлены (по умолчанию)

У вас уже есть логическая переменная. DemoItem.Selected является логическим значением. Если вы измените его значение в любое время, флажок будет соответствующим образом установлен / снят, потому что knockout привязал пользовательский интерфейс к этому логическому значению с помощью так называемой двусторонней привязки. Это означает, что пользовательский интерфейс автоматически обновляет данные, а данные также автоматически обновляют пользовательский интерфейс.

В приведенном ниже фрагменте есть таймер, установленный для изменения значения одного флажка через 1 секунду.

 function DemoItem(id, name, state) {
  var self = this;

  self.id = ko.observable(id);
  self.Name = ko.observable(name);
  self.Selected = ko.observable(state);
}

function ViewModel() {
  var self = this;

  self.availableItems = ko.observableArray([]);


  self.init = function() {
    self.availableItems.push(new DemoItem(1, 'One', true));
    self.availableItems.push(new DemoItem(2, 'Two', true));
    self.availableItems.push(new DemoItem(3, 'Three', false));
    self.availableItems.push(new DemoItem(4, 'Four', true));
    self.availableItems.push(new DemoItem(5, 'Five', true));
  };
  
  //Example changing a boolean value after 1 second
  setTimeout(function(){
    self.availableItems()[0].Selected(false); //uncheck
  }, 1000)
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"> </script>
Available Items:
<div data-bind="foreach: $root.availableItems">
  <input type="checkbox" data-bind="checked: Selected" />
  <span data-bind="text: 'amp;nbsp;'   Name()"></span>
  <br/>
</div>