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

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -