Post
Ask Question

Multiple View Models binding with Knockout

Introduction

 
This blog demonstrates how to bind multiple view models with the knockout.  Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.
 
 
Download knockout.js from here http://knockoutjs.com/
 
The purpose of this blog is only to show how to bind multiple view models, so I am using mostly code from knockout.js.
 
So let's make a new asp.net website and add knockout.js.
  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="js/knockout-2.3.0.js"></script>  
  4. </head> 
In my code, I have two div
  1. <div id="EmployeeDiv">  
  2.     Choose a employee name:  
  3.     <select data-bind="options: employees, optionsCaption: 'Choose...', optionsText: 'name', value: chosenEmployee"></select>  
  4.     <button data-bind="enable: chosenEmployee, click: resetEmployee">Clear</button>  
  5.     <p data-bind="with: chosenEmployee">  
  6.         You have choosen <b data-bind="text: name"></b>  
  7.         ($<span data-bind="text: location"></span>)  
  8.     </p>  
  9. </div>  
  10. <div id="NameDiv">  
  11.     <p>First name: <strong data-bind="text: firstName"></strong></p>  
  12.     <p>Last name: <strong data-bind="text: lastName"></strong></p>  
  13.     <p>First name: <input data-bind="value: firstName" /></p>  
  14.     <p>Last name: <input data-bind="value: lastName" /></p>  
  15.     <button data-bind="click: capitalizeLastName">Go caps</button>  
  16.     <p>Full name: <strong data-bind="text: fullName"></strong></p>  
  17. </div> 
Now let's make view models
  1. <script>  
  2. function EmployeesViewModel() {  
  3.     this.employees = [  
  4.         { name: "Nancy Davolio", location: "Seattle WA" },  
  5.         { name: "Andrew Fuller", location: "Tacoma WA" },  
  6.         { name: "Janet Leverling", location: "Kirkland WA" },  
  7.         { name: "Steven Buchanan", location: "London WA" },  
  8.         { name: "Margaret Peacock", location: "Redmond WA" }  
  9.     ];  
  10.   
  11.     this.chosenEmployee = ko.observable();  
  12.     this.resetEmployee = function() {  
  13.         this.chosenEmployee(null)  
  14.     }  
  15. }  
  16.   
  17. function AppViewModel() {  
  18.     this.firstName = ko.observable("Raj Kumar");  
  19.     this.lastName = ko.observable("Choudhary");  
  20.   
  21.     this.capitalizeLastName = function() {  
  22.         var currentVal = this.lastName(); // Read the current value  
  23.         this.lastName(currentVal.toUpperCase()); // Write back a modified value  
  24.     };  
  25.   
  26.     this.fullName = ko.computed(function() {  
  27.         return this.firstName() + " " + this.lastName();  
  28.     }, this);  
  29. }  
  30.   
  31. // Activates knockout.js  
  32.   
  33. //ko.applyBindings(new EmployeesViewModel());  
  34. //ko.applyBindings(new AppViewModel());  
  35.   
  36. ko.applyBindings(new EmployeesViewModel, document.getElementById("EmployeeDiv"));  
  37. ko.applyBindings(new AppViewModel, document.getElementById("NameDiv"));  
  38. </script> 
Bold code shows how to bind multiple view models.
 
Let's run the application.
 
img1.jpg
 
Image 1.