knockout.js 应用带有一些布尔变量的复选框预定义的初始状态或默认状态

Question

我想了解如何根据某些布尔变量的状态来控制复选框状态（选中或未选中）最初是应用预定义状态还是默认状态（未选中）

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>

此代码已应用预定义状态。但我想调整或更改它，以便我有一些布尔变量，并通过设置或取消设置该变量，应用初始状态，或者取消选中复选框（默认）

Answer 1

昨天已经回答了非常相似的问题，因此如果没有得到令人满意的回答，您可能需要进一步澄清您的问题，但我会尝试回答我认为您要问的问题。

Knockout 将您的 javascript 视图模型绑定到 DOM，以便您的数据更改会自动反映在 UI 中。您唯一需要做的就是绑定到您拥有的可观察对象。对 DemoItem.Selected 的任何更改都会相应地导致复选框 check/uncheck。如果 Selected 以 true 开始，则复选框将以选中状态开始。

but I would like to adapt it or change it so that I have some boolean varaible, and by setting or unsetting that variable, initial states apre either applied, or checkboxes are unchecked (default)

您已经有一个布尔变量。 DemoItem.Selected 是一个布尔值。如果您随时修改其值，复选框将相应地 check/uncheck，因为 knockout 已将 UI 绑定到该布尔值，这被称为双向绑定。这意味着 UI 会自动更新数据，数据也会自动更新 UI。

在下面的代码片段中，有一个计时器设置为在 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>

Answer 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>

knockout.js 应用带有一些布尔变量的复选框预定义的初始状态或默认状态

knockout.js applying checkbox predefined initial-state or default state with some boolean variable

javascript

knockout.js