Knockout Tutorial - Part 1
4.69/5 (16 votes)
Basics of knockout and MVVM pattern
Introduction
In recent years, there’s a lot happening in client side development and popularity of new technologies and frameworks has been taking off.
Many frameworks like angular, backbone, ember, knockouts have come up.
In this series, we would learn about knockout.js and its integration with other client side technologies. In Part 1, we would cover the following :
- What is Knockout (KO)
- MVVM Pattern
- Scenario
Knockout
Knockout is a JavaScript library
that helps to create rich, responsive display and editor user interfaces with a
clean underlying data model.
It
is a
JavaScript implementation of the
Model-View-ViewModel pattern with templates.
Let’s try to understand about MVVM pattern which Knockout uses for binding HTML element with view model.
MVVM
|
What is MVVM |
It is a software architectural pattern.
It was originally defined by Microsoft to be used with WPF and Silverlight. It is an extension of Martin Fowlers ‘Presentation pattern |
|
What kind of Pattern |
It is one of the presentation patterns. The basic purposes of these patterns are to remove complication around UI development and make it easy for development, clean and manageable code. MVP, MVC are the other presentation patterns. data binding between View and view model makes it different from other presentation Patterns. |
Conceptual Diagram
|
M in MVVM |
M is model.
Model is responsible for:
An example of Model can be an Account object with the following properties:
|
|
V in MVVM |
The view is an application user interface which defines the appearance of UI using different elements and control like textbook, buttons, combo box, image, etc. The view is responsible for rendering UI elements. |
|
VM in MVVM |
VM stands for VIEW MODEL
|
Realization in WPF
Realization in HTML/JavaScript (Using Knockout.js)
All theoretical so far. Let’s do some coding using Knockout.
Coding
What we are going to cover here:- Problem Statement
- Implementation without Knockout
- Implementation with Knockout
Problem Statement
Let's take a simple case to display User’s Account information like Bank, AccountNumber, Status on page.
Implementation Without Knockout
What we would need to implement it:
- HTML Elements for BankName, Account Number and status
- JavaScript for defining
Accountclass and object - JavaScript/Jquery to search HTML elements and pushing data to them
User Interface
<body>
<h2>My Account </h2>
<span>Bank Name:</span><span id="accontBankName"></span>
<br />
<span>Account Number:</span><span id="accountNum"></span>
<br />
<span>Account Type:</span><span id="accountType"></span>
<br />
<span>Status:</span><span id="accountStatus"></span>
</body>
JavaScript Code
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
function Account(bank, accNo, type, status) {
var self = this;
self.bank = bank;
self.accNo = accNo;
self.type = type;
self.status = status;
};
var myAcc = new Account("Bank1", "12345678", "Saving", "Active");
// To add this
$("#accontBankName").text(myAcc.bank);
$("#accountNum").text(myAcc.accNo);
$("#accountType").text(myAcc.type);
$("#accountStatus").text(myAcc.status);
});
</script>
Let’s see what could be the possible issues with the above approach:
- Requires a line of code for each mapping between source value and target elements. Just think the case where we would have had many more elements.
- If source value changes, we would have to write more code to push the values again.
- If the value changes in the HTML element, the changes would not be reflected in the underlying source.
Point 2 and Point 3 can be resolved with a lot of coding. But would it not be better if we have some framework which does this and binds HTML elements with the source object. This is where a framework like knockout comes into the picture.
Implementation using Knockout
<body>
<h2>My Account </h2>
<span>Bank Name:</span><
data-bind="text: account.bank" span id="accontBankName"></span>
<br />
<span>Account Number:</span><
data-bind="text: account.accNo" span id="accountNum"></span>
<br />
<span>Account Type:</span><
data-bind="text: account.type" span id="accountType"></span>
<br />
<span>Status:</span><
data-bind="text: account.status" span id="accountStatus"></span>
</body>
Changes are highlighted with blue background. Data-bind attributes comes from knockout library and use to bind element with object properties.
A binding consists of two items, the binding name and value, separated by a colon
JavaScript Code
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script src="ko/knockout-2.3.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function Account(bank, accNo, type, status) {
var self = this;
self.bank = bank;
self.accNo = accNo;
self.type = type;
self.status = status;
};
function AccountViewModel() {
var self = this;
self.account = new Account("sbi", "12345678", "Saving", "Active");
};
ko.applyBindings(new AccountViewModel());
});
</script>
Changes are highlighted with blue background
- Script to include knockout.js. You can download from here.
- Create
AccountViewModelclass :- the class to bind with UI elements. Ko.applybinding:- it activate the KO and sets the data context for the page to the AccountViewModel object.
Let’s see how to fix issue #2 i.e. sync data between source object and html element.
Here Observables from KO would help. Observables Are special JavaScript objects that can notify subscribers about changes, and can
automatically detect dependencies.
How to make object property observable?
Using ko. Observable ()
Let's see how the code would look like now.
JavaScript Code
<script src="jquery/jquery.min.js"
type="text/javascript"></script>
<script src="ko/knockout-2.3.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function Account(bank, accNo, type, status) {
var self = this;
self.bank = bank;
self.accNo = accNo;
self.type = type;
self.status = ko.observable(status);
};
function AccountViewModel() {
var self = this;
self.account = new Account("sbi",
"12345678", "Saving", "Active");
};
ko.applyBindings(new AccountViewModel());
});
</script>
To see how it syncs data, let's add one input element and bind it to status property.
Now we have two elements which are bind to status property.
spanelement withid=accountStatus- Input elements
Here the UI code would look like:
<body>
<h2>My Account </h2>
<span>Bank Name:</span>
<span data-bind="text: account.bank"
span id="accontBankName"></span>
<br />
<span>Account Number:</span>
<span data-bind="text: account.accNo"
span id="accountNum"></span>
<br />
<span>Account Type:</span>
<span data-bind="text: account.type"
span id="accountType"></span>
<br />
<span>Status:</span><
span data-bind="text: account.status"
span id="accountStatus"></span>
<p>Change Account status
<input data-bind="value:account.status" /></p>
</body>
Browse the page with the latest changes. You would see the following screen:
Type Closed in input box:
Click outside of input box. You would see:
When you changed the value in input box, it updates the status property its bind to. As the same property binds to span displaying status, it changes value displayed in span to "Closed".
Summary
In this article, we covered the basic on Knockout and MVVM. There are many things to cover like observable array, computed properties, command binding and conditional binding. We would continue our discussion in the next article.