Knockout Example - 2 Views

With related linking between data

by Ben Clayton

HTML

<!--  http://www.mytecbits.com/internet/knockout-js-binding-multiple-view-models -->  
<!--  Knockout's Binding Contexts.
Here are all the built-in variables: 
  $parent
  $parents
  $root
  $data
  $index (only available within foreach bindings)
  $parentContext
  $context
  $element
-->

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

    <div style="display: table-cell;" id="Form2">
        <h3>People</h3>
        <ul data-bind="foreach:people">
        <li>
            Person Name:<input data-bind="value: name" />
            Coupons:<span data-bind="text: coupons"></span>
            <select data-bind="options: $parent.availableTeams,
                   optionsText: function(team) { return team.name },
                   optionsValue: function(team) { return team.id },
                   
                   selectedOptions: chosenTeams"
                   size="5" multiple="true"></select>
             Teams(<span data-bind="text: chosenTeams().length">x</span>)
            <button data-bind="click: $parent.btnDelete">Del Person</button>
            Created <span data-bind="text: created">x</span>
        </li>
        </ul>
        <button data-bind="click: btnAdd">Add Person</button>
    </div>

CSS

input.small {width:20px;}

JavaScript

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


    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) };
        self.btnListMembers = function(team){
            var tnm = team.name(),members=[];
            for (var i=0;i<peopleViewModel.people().length;i++){
                var person = peopleViewModel.people()[i];
                for (var j=0;j<person.chosenTeams().length;j++){
                    if(person.chosenTeams()[j].name() == tnm){
                       members.push(person.name()) 
                    }
                }
            }
            
            // peopleViewModel.people()[0].chosenTeams()[0].name()  gives 'MU'
            //console.log(members);
            alert("Team: "+tnm+" members\n"+members.join("\n"));
        };
       
    };
 
    function person(nm,c){
        var self=this;
        self.created=new Date();
        self.name = ko.observable(nm);
        self.coupons = ko.observable(c);
        self.chosenTeams = ko.observableArray([]);
        self.memberOfTeam = function(teamname){
            return (self.chosenTeams.indexOf(teamname)>-1);
        };
        return self;
     }
    
    function viewModel_2(){
        var self=this;
        // data
        self.people = ko.observableArray([
            new person("Fred",23),
            new person("Bert",73)
            
        ]);
        self.availableTeams =  teamViewModel.teams;
        // Operations
        self.btnAdd = function() {self.people.push(new person("",0) )};
        self.btnDelete =...