Knockout Example - 2 Views

by Ben Clayton

HTML

<!--  http://www.mytecbits.com/internet/knockout-js-binding-multiple-view-models -->  


    <div style="width: 500px; float: left;" id="Form1">
        <ul data-bind="foreach:teams">
        <li>
            Team:<input data-bind="value: name" />
            No Players:<input data-bind="value: numplayers" />
            <button data-bind="click: $parent.btnDelete">Del</button>
        </li>
        </ul>
        <button data-bind="click: btnAdd">Add Team</button>
    </div>

    <div style="display: table-cell;" id="Form2">
        <ul data-bind="foreach:people">
        <li>
            Person Name:<input data-bind="value: name" />
            Coupons:<span data-bind="text: coupons"></span>
            <button data-bind="click: $parent.btnDelete">Del Person</button>
        </li>
        </ul>
        <button data-bind="click: btnAdd">Add Person</button>
    </div>

JavaScript

function team (nm,p){
        var self=this;
        self.name = ko.observable(nm);
        self.numplayers = ko.observable(p);
    }


    function viewModel_1(){
        var self=this;
        self.teams= ko.observableArray([
            new team("MU",66),
            new team("Hastings",55)
            
        ]);
        // Operations
        self.btnAdd = function() {self.teams.push(new team("",0) )};
        self.btnDelete = function(team) { self.teams.remove(team) };
       
    };
 
    function person(nm,c){
        var self=this;
        self.name = ko.observable(nm);
        self.coupons = ko.observable(c);
    }
    
    function viewModel_2(){
        var self=this;
        // data
        self.people = ko.observableArray([
            new person("Fred",23),
            new person("Bert",73)
            
        ]);
        
        // Operations
        self.btnAdd = function() {self.people.push(new person("",0) )};
        self.btnDelete = function(person) { self.people.remove(person) };

        
        
    };
 
    ko.applyBindings(new viewModel_1(), document.getElementById("Form1"));
    ko.applyBindings(new viewModel_2(), document.getElementById("Form2"));