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

У меня есть код шаблона здесь: 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: '&nbsp;' + Name()"></span>
  <br/>
</div>

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

0
MDE E 17 Апр 2019 в 09:46

2 ответа

Лучший ответ

После перечитывания вашего вопроса еще несколько раз, я думаю, возможно, вы специально спрашиваете о булевом переключателе для переключения, установлены ли начальные значения или нет. Если это так, вы можете просто передать логическое значение своей функции 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 && true));
    self.availableItems.push(new DemoItem(2, 'Two', applyStates && true));
    self.availableItems.push(new DemoItem(3, 'Three', applyStates && false));
    self.availableItems.push(new DemoItem(4, 'Four', applyStates && true));
    self.availableItems.push(new DemoItem(5, 'Five', applyStates && 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: '&nbsp;' + Name()"></span>
  <br/>
</div>
0
Jason Spake 17 Апр 2019 в 16:53

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

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

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

У вас уже есть логическая переменная. 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: '&nbsp;' + Name()"></span>
  <br/>
</div>
0
Jason Spake 17 Апр 2019 в 14:37