knockout.js - Implementing a Menu in Knockout - switching between views with different viewModels -


essentially trying implement robn's extremely simple template switcher http://jsfiddle.net/rniemeyer/xyz8m/ uses 'template' data binding.

   (---so wants code here - see fiddle complete code---)    <div id="templatecontent" data-bind='template: { name: currentview() }'></div>     var viewmodel = {       currentview: ko.observable("template-1"),       toggleview: function() {        this.currentview(this.currentview() === "template-1" ? "template-2" : "template-1");         }   };    ko.applybindings(viewmodel); 

i have seen lot of other simple examples doing , using same viewmodel class each loaded template. exception - robn's samplepresentation app (i don't have enough rep points post link) while impressive found hard connect noobie ko experience. think doing in section.activate() method, but, it's unclear me.

i want use concept in real app, having binding context issues. here trying do: http://jsfiddle.net/jockor/dsedh/4/

   line intentionally left blank (please see fiddle vs. mangling code here) 

basically when nav link/button pressed want swap out body content panel template. template need own data backed own viewmodel.

the fiddle above go @ simplified version of concept - trying switch between cats , dogs panels. encounter data bound 'template' data-bind used loaded cat/dog templates.

can tell me if doing correctly, or if abusing 'template' binding concept?

i have modified jsfiddle work:

http://jsfiddle.net/5rmal/2/

what needed switch data field of template binding well. switching template name , see code looking way change view model data well. so, crudely implemented switches data viewmodel viewmodel when switches name. there more elegant ways this, jsfiddle demonstration.

by changing data can modify template points to fetch data. making observable, able have data points @ switch. quick crude implementation above uses simple object holds both template name , data inside observable. since name of template , data have switch @ same time, update values in object inside observable , manually tell observable value has changed. if change data before name of template, try binding previous template. same, if change name before data, try binding old data new template. so, in order without blowing not finding variables , stuff when re-binding template need make sure somehow template binding doesn't update before done changing both name of template , data point to.

edit: noticed had function handler in knockout bindings passing $data first argument function. knockout passes $data first argument function in first place, replaced function () { ....goto($data); } ....goto (... = stuff). sort of side node (and didn't require modification function signature).


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -