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

昨天已经回答了非常相似的问题，因此，如果未令人满意地回答问题，您可能需要进一步澄清您的问题，但我会尽力回答我认为您的问题。

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

但我想对其进行调整或更改，以便我有一些布尔值可变的，以及通过设置或取消设置该变量的初始状态要么应用，要么未选中复选框（默认）

您已经有一个布尔变量。 DemoItem.Selected是布尔值。如果您随时修改其值，则该复选框将进行相应的检查/取消选中，因为敲除操作已通过双向绑定将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>

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

2 个答案: