Knockout Example - 2 Views

With related linking between data

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
-->
<h1>Teams</h1>
    <div style="width: 500px; float: left;" id="Form1">
        <ul data-bind="foreach:team">
        <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="clear:both"></div>
    <hr/>
 <h1>People</h1>
   <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>
            <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 data-bind="foreach:people">
            Person Name:<input data-bind="value: name" />
    Coupons:<span data-bind="text: coupons"></span>
</div>



</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;
    }

    ////// VM Teams  //////////////////////
    function viewModel_1(){
        var self=this;
        self.team= ko.observableArray([
            new team("MU",66),
            new team("Hastings",55)
        ]);
        // Operations
        self.btnAdd = function() {self.team.push(new team("Maidstone",20) )};
        self.btnDelete = function(team) { self.team.remove(team) };
        self.btnListMembers = function(team){
              var tnm = team.name();
              var members=[];
            
            debugger;
            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()  => '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;
     }
    
    ///////// VM People ////////////////////////////////
    function viewModel_2(){
        var self=this;
        // data
        self.people = ko.observableArray([
            new person("Fred",23),
            new person("Bert",73)
            
        ]);
       ...