Binding multiple views

http://stackoverflow.com/questions/8676988/example-of-knockoutjs-pattern-for-multi-view-applications

by Keyur Patel

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div data-bind="foreach: views">
     <a href="#" data-bind="text: title, click: $root.selectedView"></a>&nbsp;
</div>
<hr/>

<div data-bind="with: selectedView">
    <div data-bind="template: { name: templateName, data: data }"></div>
</div>

<script id="oneTmpl" type="text/html">
    <ul data-bind="foreach: items">
        <li>
            <span data-bind="text: id"></span>
            <input data-bind="value: name" />
        </li>
    </ul>
</script>

<script id="twoTmpl" type="text/html">
    First: <input data-bind="value: subModelB.firstName" />
    Last:  <input data-bind="value: lastName" />
</script>

JavaScript

var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var subModelA = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ])
};
 
var subModelB = {
    firstName: ko.observable("Bob"),
    lastName: ko.observable("Smith") 
};


var viewModel = {
    views: ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
        ]),
    selectedView: ko.observable()    
};

ko.applyBindings(viewModel);