knockout.js to knockout json using few models

Current Task shows you how to merge few models into one and put it into knockout json object.

by kougiland

HTML

<div data-bind="with: myTab1">
    <ul data-bind="template: {name: 'tabTmpl', foreach: tab1Array}"></ul>
</div>
<br/>
<div>------------------------------------------</div>
<br/>
<div data-bind="with: myTab2">
    <ul data-bind="template: {name: 'tabTmpl', foreach: tab2Array}"></ul>
</div>
<br/>
<input type="button" data-bind="click: grabData" value="Grab all data from Models" />


<script id="tabTmpl" type="text/html">
    <li>
        <div data-bind="text: name, click: name"></div>
    </li>
</script>

JavaScript

var CustomExport = {
    Tab1: function () {
        this.tab1Array = ko.observableArray([
            {name: "Tab1 Item1"}, 
            {name: "Tab1 Item2"}, 
            {name: "Tab1 Item3"}
        ]);
    },
    Tab2: function () {
        this.tab2Array = ko.observableArray([
            {name: "Tab2 Item1"},
            {name: "Tab2 Item2"},
            {name: "Tab2 Item3"}
        ]);
    },
    viewModel: function () {
        this.myTab1 = new CustomExport.Tab1();
        this.myTab2 = new CustomExport.Tab2();
        this.grabData = function(){
            alert("TAB 1 data: " + JSON.stringify(ko.toJS(this.myTab1)));
            alert("TAB 2 data: " + JSON.stringify(ko.toJS(this.myTab2)));
        };
    }
    
}

ko.applyBindings(new CustomExport.viewModel());