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.
Next Recommended Reading Accessing View Bag And View Data Value In External Java Script File