knockout.js chekbox binding from json data

Question

I have prepared a basic fiddle of what I have here: http://jsfiddle.net/s103eqdc/

I have a function called relayButton, which loads and prepares initial data for view:

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);
});
}

But, how can I change the architecture of this simple code, so that, If there is a json data periodically loaded from server, it imidietly updates the proper relayId in the loop with checked or uncheked state?

Answer 1

You just need something to process the data when it comes from the backend and matches your relays id and updates the value.

I would do something like this

 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>