Develop Reference

knockout.js chekbox binding from json data

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?

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: ' ' + 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>

JS observer pattern

I try the observer pattern (by these two Urls: https://davidwalsh.name/pubsub-javascript, http://www.dofactory.com/javascript/observer-design-pattern) but listeners array is empty when I call the publish function.
main.pagination.event= (function () {
var listeners = [];
return {
subscribe: function (fn) {
listeners.push(fn);
return {
unsubscribe: function (fn) {
listeners= listeners.filter(
function (item) {
if (item !== fn) {
return item;
}
}
);
}
};
},
publish: function () {
//it's empty
listeners.forEach(function (item) {
item("...");
});
}
};
})();
main.pagination.init = function () {
$('ul li').click(function () {
main.pagination.event.publish();
};
};
main.update.init = function() {
var event = main.pagination.event.subscribe(main.update.listener);
};
main.update.listener = function (tbl) {
alert(tbl);
};
Thanks for help.

It is empty because you call subscribe after publish which does not contain anything inside the listeners array. Just change the order of the calls like so
main.update.listener = function (tbl) {
alert(tbl);
};
main.pagination.init = function () {
$('ul li').click(function () {
main.pagination.event.publish();
};
};
main.update.init = function() {
var event = main.pagination.event.subscribe(main.update.listener);
};
main.update.init(); // invoke subscribe first to add the listener to the array
main.pagination.init();

Access object context from prototype functions JavaScript

I have problems with object scope.
Here is my class code
// Table list module
function DynamicItemList(data, settings, fields) {
if (!(this instanceof DynamicItemList)) {
return new DynamicItemList(data, settings, fields);
}
this.data = data;
this.settings = settings;
this.fields = fields;
this.dataSet = {
"Result": "OK",
"Records": this.data ? JSON.parse(this.data) : []
};
this.items = this.dataSet["Records"];
this.generateId = makeIdCounter(findMaxInArray(this.dataSet["Records"], "id") + 1);
this.dataHiddenInput = $(this.settings["hidden-input"]);
}
DynamicItemList.RESULT_OK = {"Result": "OK"};
DynamicItemList.RESULT_ERROR = {"Result": "Error", "Message": "Error occurred"};
DynamicItemList.prototype = (function () {
var _self = this;
var fetchItemsList = function (postData, jtParams) {
return _self.dataSet;
};
var createItem = function (item) {
item = parseQueryString(item);
item.id = this.generateId();
_self.items.push(item);
return {
"Result": "OK",
"Record": item
}
};
var removeItem = function (postData) {
_self.items = removeFromArrayByPropertyValue(_self.items, "id", postData.id);
_self.dataSet["Records"] = _self.items;
_self.generateId = makeIdCounter(findMaxInArray(_self.dataSet["Records"], "id") + 1);
return DynamicItemList.RESULT_OK;
};
return {
setupTable: function () {
$(_self.settings["table-container"]).jtable({
title: _self.settings['title'],
actions: {
listAction: fetchItemsList,
deleteAction: removeItem
},
fields: _self.fields
});
},
load: function () {
$(_self.settings['table-container']).jtable('load');
},
submit: function () {
_self.dataHiddenInput.val(JSON.stringify(_self.dataSet["Records"]));
}
};
})();
I have problems with accessing object fields.
I tried to use self to maintain calling scope. But because it is initialized firstly from global scope, I get Window object saved in _self.
Without _self just with this it also doesn't work . Because as I can guess my functions fetchItemsList are called from the jTable context and than this points to Window object, so I get error undefined.
I have tried different ways, but none of them work.
Please suggest how can I solve this problem.
Thx.
UPDATE
Here is version with all method being exposed as public.
// Table list module
function DynamicItemList(data, settings, fields) {
if (!(this instanceof DynamicItemList)) {
return new DynamicItemList(data, settings, fields);
}
this.data = data;
this.settings = settings;
this.fields = fields;
this.dataSet = {
"Result": "OK",
"Records": this.data ? JSON.parse(this.data) : []
};
this.items = this.dataSet["Records"];
this.generateId = makeIdCounter(findMaxInArray(this.dataSet["Records"], "id") + 1);
this.dataHiddenInput = $(this.settings["hidden-input"]);
}
DynamicItemList.RESULT_OK = {"Result": "OK"};
DynamicItemList.RESULT_ERROR = {"Result": "Error", "Message": "Error occurred"};
DynamicItemList.prototype.fetchItemsList = function (postData, jtParams) {
return this.dataSet;
};
DynamicItemList.prototype.createItem = function (item) {
item = parseQueryString(item);
item.id = this.generateId();
this.items.push(item);
return {
"Result": "OK",
"Record": item
}
};
DynamicItemList.prototype.setupTable = function () {
$(this.settings["table-container"]).jtable({
title: this.settings['title'],
actions: this,
fields: this.fields
});
};
DynamicItemList.prototype.load = function () {
$(this.settings['table-container']).jtable('load');
};
DynamicItemList.prototype.submit = function () {
this.dataHiddenInput.val(JSON.stringify(this.dataSet["Records"]));
};
DynamicItemList.prototype.removeItem = function (postData) {
this.items = removeFromArrayByPropertyValue(this.items, "id", postData.id);
this.dataSet["Records"] = this.items;
this.generateId = makeIdCounter(findMaxInArray(this.dataSet["Records"], "id") + 1);
return DynamicItemList.RESULT_OK;
};
DynamicItemList.prototype.updateItem = function (postData) {
postData = parseQueryString(postData);
var indexObjToUpdate = findIndexOfObjByPropertyValue(this.items, "id", postData.id);
if (indexObjToUpdate >= 0) {
this.items[indexObjToUpdate] = postData;
return DynamicItemList.RESULT_OK;
}
else {
return DynamicItemList.RESULT_ERROR;
}
};

Your assigning a function directly to the prototype. DynamicItemList.prototype= Normally it's the form DynamicItemList.prototype.somefunc=

Thanks everyone for help, I've just figured out where is the problem.
As for last version with methods exposed as public.
Problematic part is
$(this.settings["table-container"]).jtable({
title: this.settings['title'],
actions: {
listAction: this.fetchItemsList,
createAction: this.createItem,
updateAction: this.updateItem,
deleteAction: this.removeItem
},
fields: this.fields
});
};
Here new object is created which has no idea about variable of object where it is being created.
I've I changed my code to the following as you can see above.
$(this.settings["table-container"]).jtable({
title: this.settings['title'],
actions: this,
fields: this.fields
});
And now it works like a charm. If this method has drawbacks, please let me know.
My problem was initially in this part and keeping methods private doesn't make any sense because my object is used by another library.
Thx everyone.

You need to make your prototype methods use the this keyword (so that they dyynamically receive the instance they were called upon), but you need to bind the instance in the callbacks that you pass into jtable.
DynamicItemList.prototype.setupTable = function () {
var self = this;
function fetchItemsList(postData, jtParams) {
return self.dataSet;
}
function createItem(item) {
item = parseQueryString(item);
item.id = self.generateId();
self.items.push(item);
return {
"Result": "OK",
"Record": item
};
}
… // other callbacks
$(this.settings["table-container"]).jtable({
title: this.settings['title'],
actions: {
listAction: fetchItemsList,
createAction: createItem,
updateAction: updateItem,
deleteAction: removeItem
},
fields: this.fields
});
};

Why is the store did not see action in reflux?

I get the following error
actions.toggleMenu is not a function
I create a action
module.exports = Reflux.createAction([
'callAi',
'logout',
'fullScreen',
'toggleMenu',
'showSidebar'
]);
I create this store
actions = require('../actions/menu.js');
module.exports = Reflux.createStore({
listenables: actions,
init: function () {
console.log('init', this) // Its good!
},
onCallAi: function () {},
onLogout: function () {},
onFullScreen: function () {},
onToggleMenu: function () {
console.log('actions onToggle', 'inMoment') //Not good
},
onShowSidebar: function () {}
});
And this view
actions = require('../../../../Plus-WRIO-App/js/actions/menu')
store = require('../../../../Plus-WRIO-App/js/stores/menu')
var CreateDomLeft = React.createClass({
mixins: [Reflux.listenTo(store, "log")],
toggle: function(){
console.log('toggle', 'GO');
actions.toggleMenu() // error here!!!
},
render: function() {
return (
<li onClick={this.toggle} className='btn btn-link'></li>
);
}
});
module.exports = CreateDomLeft;

You have a typo. It should be createActions (plural)

Javascript: Mixing constructor pattern and Revealing Module Pattern

Is there any way I can do have a Javascript class that extends an object that was created through the revealing module pattern? I tried the following code, but is there away to achieve the same thing?
sv.MergeQuestionViewModel = function () {
this = sv.QuestionDetailViewModal();
this.init($("#mergeQuestionModel"));
};
sv.QuestionDetailViewModal = function () {
var $el,
self = this,
_question = ko.observable(),
_status = new sv.Status();
var _init = function (el) {
$el = el;
$el.modal({
show: false,
backdrop: "static"
});
};
var _show = function () {
$el.modal('show');
};
var _render = function (item) {
_question(new sv.QuestionViewModel(item));
_show();
};
var _reset = function () {
_question(null);
_status.clear();
};
var _close = function () {
$el.modal('hide');
_reset();
};
return {
init: _init,
show: _show,
render: _render,
reset: _reset,
close: _close
};
};

You could use jQuery.extend to achive this behaviour.
sv.MergeQuestionViewModel = function () {
$.extend(this, sv.QuestionDetailViewModal);
this.init($("#mergeQuestionModel"));
};
sv.QuestionDetailViewModal = (function () {
var el,
_init = function($el) {
el = $el;
console.log('init', el);
},
_render = function() {
console.log('render', el);
};
return {
init : _init,
render : _render
};
}());
var view = new sv.MergeQuestionViewModel();
view.render();
Test it on http://jsfiddle.net/GEGNM/