Binding multiple views

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

by ptim

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div data-bind="foreach: views">
     <a href="#" data-bind="text: title, click: $root.selectedView"></a>&nbsp;
</div>
<hr/>

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

<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: firstName" />
    Last:  <input data-bind="value: lastName" />
</script>

JavaScript

var SubModelA = function() {
    this.items = ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ]);
};

var SubModelB = function() {
    this.firstName = ko.observable("Bob");
    this.lastName = ko.observable("Smith");
};

// http://stackoverflow.com/questions/12884678/how-to-properly-structure-a-knockoutjs-application
// http://jsfiddle.net/memeLab/cy7u9/1/
var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var definedViews = ko.observableArray([
    new View("one", "oneTmpl", new SubModelA()),
    new View("two", "twoTmpl", new SubModelB())
]);

var viewModel = {
	views: definedViews,
    defaultView: 0,
    selectedView: ko.observable( definedViews[0] )
};

ko.applyBindings(viewModel);