来自 json 数据的 knockout.js 复选框绑定

Question

我已经准备了一个基本的小提琴：http://jsfiddle.net/s103eqdc/

我有一个名为 relayButton 的函数，它加载并准备初始数据以供查看：

function relayButton(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);
});
}

但是，我怎样才能改变这个简单代码的架构，这样，如果有一个 json 数据定期从服务器加载，它会在循环中以选中或未选中状态更新正确的 relayId？

Answer 1

您只需要一些东西来处理来自后端的数据并匹配您的中继 ID 并更新值。

我会做这样的事情

var app = window.app || {};

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function dataService() {
  function refreshRelayData() {
    return delay(200).then(function() {
      return [{
          id: '1',
          name: 'relay1',
          state: Math.round(Math.random())
        },
        {
          id: '2',
          name: 'relay2',
          state: Math.round(Math.random())
        },
        {
          id: '3',
          name: 'relay3',
          state: Math.round(Math.random())
        }
      ];
    });
  }
  return {
    refreshRelayData:refreshRelayData
  };
};
app.delay = delay;
app.dataService = dataService

function relayButton(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);
  });
}

function ViewModel() {
  var self = this;

  self.availableRelays = ko.observableArray([]);
  self.activeRelays = ko.computed(function() {
    return self.availableRelays().filter(function(relay) {
      return relay.state();
    });
  });

  self.onRelayStateChange = function(item, newValue) {
    console.log("State change event: " + item.name() + " (" + newValue + ")");
  };

  self.processData = function(data) {
    data.forEach(function(item) {
      self.availableRelays()
        .filter(r => r.id() == item.id)
        .forEach(r => r.state(item.state))
    });
  }

  self.refreshData = function() {
    app.dataService().refreshRelayData()
      .then(data => self.processData(data));
  }
  
  self.init = function() {
    self.availableRelays([
      new relayButton(1, "relay1", 1, self.onRelayStateChange),
      new relayButton(2, "relay2", 0, self.onRelayStateChange),
      new relayButton(3, "relay3", 0, self.onRelayStateChange)
    ]);
  };
}

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

setTimeout(function doSomething() {
    viewModel.refreshData()
    setTimeout(doSomething, 1000);
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: $root.availableRelays">
  <div class="switchBox">
    <div class="switchName"><strong data-bind="text: '&nbsp;' + name()"></strong></div>
    <div class="switchSlider">
      <label class="relaySwitch">
                    <input class="relaySwitch-input" type="checkbox" data-bind="checked: state">
                    <span class="relaySwitch-label" data-on="On" data-off="Off"></span>
                    <span class="relaySwitch-handle"></span>
                  </label>
    </div>
  </div>
</div>