Blog

Multiple View Models binding with Knockout

Posted by Raj Kumar Blogs | JavaScript Sep 13, 2013
This blog demonstrates how to bind multiple view models with knockout.

This blog demonstrates how to bind multiple view models with knockout.  Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.

Lear more from here http://knockoutjs.com/documentation/introduction.html

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.

<head runat="server">
    <title></title>
    <script src="js/knockout-2.3.0.js"></script>
</head>

In my code I have two div

  <div id="EmployeeDiv">
            Choose a employee name:
       
<select data-bind="options: employees, optionsCaption: 'Choose...', optionsText: 'name', value: chosenEmployee"></select>
 
           
<button data-bind="enable: chosenEmployee, click: resetEmployee">Clear</button>

            <p data-bind="with: chosenEmployee">
                You have choosen <b data-bind="text: name"></b>

                ($<span data-bind="text: location"></span>)
           
</p>
        </div>

<div id="NameDiv">
            <p>First name: <strong data-bind="text: firstName"></strong></p>
            <p>Last name: <strong data-bind="text: lastName"></strong></p>

            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>

            <button data-bind="click: capitalizeLastName">Go caps</button>
            <p>Full name: <strong data-bind="text: fullName"></strong></p>
        </div>

Now let's make view models

<script>
            function EmployeesViewModel() {
               
this.employees = [
                    { name:
"Nancy Davolio", location: "Seattle WA" },
                    { name:
"Andrew Fuller", location: "Tacoma WA" },
                    { name:
"Janet Leverling", location: "Kirkland WA" },
                    { name:
"Steven Buchanan", location: "London WA" },
                    { name:
"Margaret Peacock", location: "Redmond WA" }
                ];
 
               
this.chosenEmployee = ko.observable();
               
this.resetEmployee = function () {
                   
this.chosenEmployee(null)
                }
            }

            function AppViewModel() {
               
this.firstName = ko.observable("Raj Kumar");
               
this.lastName = ko.observable("Choudhary");

                this.capitalizeLastName = function () {
                   
var currentVal = this.lastName();        // Read the current value
                    this.lastName(currentVal.toUpperCase()); // Write back a modified value
                };
 
               
this.fullName = ko.computed(function () {
                   
return this.firstName() + " " + this.lastName();
                },
this);
            }

// Activates knockout.js

//ko.applyBindings(new EmployeesViewModel());
//ko.applyBindings(new AppViewModel());

       ko.applyBindings(new EmployeesViewModel, document.getElementById("EmployeeDiv"));
       ko.applyBindings(
new AppViewModel, document.getElementById("NameDiv"));
</script>

Bold code shows how to bind multiple view models.

Let's run the application.

img1.jpg

Image 1.

COMMENT USING
PREMIUM SPONSORS
Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.
Employers - Post Free Jobs
SPONSORED BY
  • MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.