如何使用 knockout.js 订阅变量状态更改

Question

这是我想要实现的一个基本的 knockout.js 小提琴：https://jsfiddle.net/sr3wy17t/

它做我想做的事，但不完全按照我想要的方式。

为了完整起见，我将在此处重复上述小提琴代码的部分内容：

在视图中，我有 for-each 迭代一个 observableArray 的项目：

<div data-bind="foreach: $root.availableItems">
 <div class="switchBox">
  <div class="switchName"><strong data-bind="text: '&nbsp;' + name()"></strong></div>
   <label class="Switch">
    <input type="checkbox" data-bind="checked: state">
   </label>
 </div>

它会遍历我的 availableItems 数组中的元素：

self.availableItems([
new Item(1, "item1", state1, self.onItemStateChange),
new Item(2, "item2", state2, self.onItemStateChange),
new Item(3, "item3", state3, self.onItemStateChange)
]);

如您所见，我还有一个函数，在该函数中我用可观察对象初始化每个项目：

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

  self.id = ko.observable(id);
  self.name = ko.observable(name);
  self.state = ko.observable(state);

  self.state.subscribe(function(newValue) {
    onChange(self, newValue);
  });
}

数组中的每个项目都有状态变量（state1、state2、state3），它们是布尔值，它们控制检查哪个复选框，哪个不检查。它们（为了这个例子）设置在 ViewModel 的开头：

var state1 = true;
var state2 = false;
var state3 = false;

实际上 state1、state2 和 state3 是从服务器映射的。我想要实现的是，在我用起始状态值初始化我的项目后，我希望它们在 state1、state2 和 state3 的每次更改时都被订阅，以便根据从服务器收到的值选中或不选中复选框.

目前小提琴中的代码通过访问 availableItems 数组来实现状态更改，如下所示：

    setInterval(()=>{
    var itemNoThatChanged=Math.floor(Math.random()*3);
    var newState=Math.random()>0.5;
   self.availableItems()[itemNoThatChanged].state(newState)
    },1000)

这里的问题是，不是 state1 或 state2 或 state3 的变化导致了变化，而是直接访问 availableItems 数组....

如何更改此代码，使 state1、state2 和 state3 的更改导致上述行为像小提琴一样？

我需要尽可能减少对现有代码方法的更改，因为它会影响原始代码中的许多其他内容。

这可能吗，如果可以，有人可以解释一下如何在 knockout.js 中编写代码吗？

Answer 1

因为您希望对现有代码进行最小的更改；
将您的 state1、state2 和 state3 变量声明为 observables。

var state1 = ko.observable(true);
var state2 = ko.observable(false);
var state3 = ko.observable(false);

调整您的 Item 以按原样接受和使用这些内容，而不是设置 observable 本身。

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

    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.state = state;

    self.state.subscribe(function(newValue) {
        onChange(self, newValue);
  });
}

---

下面的可运行示例显示，state1（可观察）变量（由计时器回调触发）的值更改也会影响复选框，而没有任何array 访问权限。

---

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

  self.id = ko.observable(id);
  self.name = ko.observable(name);
  self.state = state;

  self.state.subscribe(function(newValue) {
    onChange(self, newValue);
  });
}

function ViewModel() {
  var self = this;
  
  var state1 = ko.observable(true);
  var state2 = ko.observable(false);
  var state3 = ko.observable(false);

  self.availableItems = ko.observableArray([]);
  self.activeItemss = ko.computed(function() {
    return self.availableItems().filter(function(item) {
      return item.state();
    });
  });
  
    self.onItemStateChange = function(item, newValue) {
    console.log("State change event: " + item.name() + " (" + newValue + ")");
  };


  self.init = function() {
    self.availableItems([
      new Item(1, "item1", state1, self.onItemStateChange),
      new Item(2, "item2", state2, self.onItemStateChange),
      new Item(3, "item3", state3, self.onItemStateChange)
    ]);
    setInterval(()=>{
      // Simulate a change of state1
        state1(!state1());
      }, 1000);
  };
 }


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: $root.availableItems">
  <div class="switchBox">
    <div class="switchName"><strong data-bind="text: '&nbsp;' + name()"></strong></div>
      <label class="Switch">
        <input type="checkbox" data-bind="checked: state">
      </label>
  </div>
</div>