knockout.js - Dealing with knockout radio lookups effectively -
ith view binding id (in case sku) on view-model, have computed value performs look-ups below (fiddle link here):
view
<div data-bind="foreach: server"> <div> <input type="radio" name="server" data-bind="attr: {value: sku}, checked: $root.selectedserver" /> <span data-bind="text: name"></span> </div> </div> <p data-bind="text: selectedserver"></p> <p data-bind="text: description"></p> view-model
var serveroptions = [{ name: "one", sku: 1000, specification: "yes", price: 100 }, { name: "two", sku: 1001, specification: "hello", price: 200 }, { name: "three", sku: 1002, specification: "wow", price: 300 }]; viewmodel = function() { var self = this; self.server = serveroptions; self.selectedserver = ko.observable(); self.description = ko.computed(function () { var selectedsku = this.selectedserver(); // needs checked on viewmodel creation computed function called // , selectedserver not selected if(typeof selectedsku == "undefined") return; var found = ko.utils.arrayfirst(serveroptions, function (item) { return item.sku == selectedsku; }, this); var textdescription = found.name + " - " + found.specification + " (" + found.price + ")"; return textdescription; }, this); return self; }; ko.applybindings(new viewmodel()); i have quite number of these lookups radio button selections, , can seen far understand error checking needs performed on each radio button on computed value depends undefined on view-model creation - makes view-model code quite 'bulky'.
is above code effective way, can computed binding triggers postponed till viewmodel built, or there other knockout utility functions (or re-factoring) make view-model cleaner?
my javascript skills still coming crash course years of c# quite different, appreciate pointers.
to delay evaluation of computed, add deferevaluation option.
self.description = ko.computed({ read : function () { var selectedsku = this.selectedserver(); [...] return textdescription; }, deferevaluation : true, }, this); see compted documentation deferevaluation.
Comments
Post a Comment