KnockoutJS Tutorial
KnockoutJS Resources
Selected Reading
- KnockoutJS - Components
- KnockoutJS - Templating
- KnockoutJS - Dependency Tracking
- KnockoutJS - Declarative Bindings
- Computed Observables
- KnockoutJS - Observables
- KnockoutJS - MVVM Framework
- KnockoutJS - Application
- KnockoutJS - Environment Setup
- KnockoutJS - Overview
- KnockoutJS - Home
KnockoutJS Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
KnockoutJS - Templating
KnockoutJS - Templating
Template is a set of DOM elements which can be used repetitively. Templating makes it easy to build complex apppcations due to its property of minimizing duppcation of DOM elements.
There are 2 ways of creating templates.
Native templating − This method supports the control flow bindings such as foreach, with, and if. These bindings capture HTML markup existing in the element and use it as template for random items. No external pbrary is required for this templating.
String-based templating − KO connects to the third party engine to pass ViewModel values into it and injects the resulting markup into the document. For example, JQuery.tmpl and Underscore Engine.
Syntax
template: <parameter-value> <script type = "text/html" id = "template-name"> ... ... // DOM elemets to be processed ... </script>
Note that type is provided as text/html in the script block to notify KO that, it is not an executable block rather just a template block which needs to be rendered.
Parameters
Combination of the following properties can be sent as parameter-value to template.
name − This represents the name of the template.
nodes − This represents an array of DOM nodes to be used as the template. This parameter is ignored if the name parameter is passed.
data − This is nothing but data to be shown via the template.
if − Template will be served if the given condition results in true or true-pke value.
foreach − To serve template in foreach format.
as − This is just to create an apas in foreach element.
afterAdd, afterRender, beforeRemove − These are all to represent callable functions to be executed depending on the operation performed.
Observations
Rendering a named Template
Templates are defined imppcitly by HTML markup inside DOM when used with control flow bindings. However if you want to, you can factor out templates into a separate element and then reference them by name.
Example
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - Named Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<span data-bind = "template: { name: friend-template , data: friend1 }"></span>
<span data-bind = "template: { name: friend-template , data: friend2 }"></span>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friend1 = {
name: Smith ,
contactNumber: 4556750345,
email: smith123@gmail.com
};
this.friend2 = {
name: Jack ,
contactNumber: 6789358001,
email: jack123@yahoo.com
};
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
Let s carry out the following steps to see how the above code works −
Save the above code in template-named.htm file.
Open this HTML file in a browser.
Here, friend-template is used 2 times.
Using "foreach" in Template
Following is an example of using foreach parameter along with the template name.
Example
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - foreach used with Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<span data-bind = "template: { name: friend-template , foreach: friends }"></span>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = [
{ name: Smith , contactNumber: 4556750345, email: smith123@gmail.com },
{ name: Jack , contactNumber: 6789358001, email: jack123@yahoo.com },
{ name: Lisa , contactNumber: 4567893131, email: psa343@yahoo.com }
]
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
Let s carry out the following steps to see how the above code works −
Save the above code in template-foreach.htm file.
Open this HTML file in a browser.
Here, foreach control is used in template binding.
Creating apas Using as Keyword for foreach Items
Following is how an apas can be created for a foreach item −
<span data-bind = "template: {
name: friend-template ,
foreach: friends,
as: frnz
}"></span>
It becomes easy to refer to parent objects from inside of foreach loops by creating apas. This feature is useful when the code is complex and nested at multiple levels.
Example
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - using apas in Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<ul data-bind = "template: {
name: friend-template ,
foreach: friends,
as: frnz
}"></ul>
<script type = "text/html" id = "friend-template">
<p>
<h3 data-bind = "text: name"></h3>
<span>Contact Numbers</span>
<ul data-bind = "template: {
name : contacts-template ,
foreach:contactNumber,
as: cont
} "></ul>
<p>Email-id: <span data-bind = "text: email"></span></p>
</p>
</script>
<script type = "text/html" id = "contacts-template">
<p>
<p><span data-bind = "text: cont"></span></p>
</p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = ko.observableArray ( [
{
name: Smith ,
contactNumber: [ 4556750345, 4356787934 ],
email: smith123@gmail.com
},
{
name: Jack ,
contactNumber: [ 6789358001, 3456895445 ],
email: jack123@yahoo.com
},
{
name: Lisa ,
contactNumber: [ 4567893131, 9876456783, 1349873445 ],
email: psa343@yahoo.com
}
]);
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
Let s carry out the following steps to see how the above code works −
Save the above code in template-as-apas.htm file.
Open this HTML file in a browser.
Apas is used instead of full name of arrays.
Using afterAdd, beforeRemove, and afterRender
There are situations wherein extra custom logic needs to be run on DOM elements created by the template. In such case, following callbacks can be used. Consider that you are using foreach element then −
afterAdd − This function is invoked when a new item is added to the array mentioned in foreach.
beforeRemove − This function is invoked just before removing the item from an array mentioned in foreach.
afterRender − Function mentioned here is invoked every time foreach is rendered and new entries are added to the array.
Example
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - Use of afterRender Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<span data-bind = "template: {
name: friend-template ,
foreach: friends ,
afterRender: afterProcess
}"></span>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
<button data-bind = "cpck: $root.removeContact">remove </button>
</script>
<script type = "text/javascript">
function MyViewModel() {
self = this;
this.friends = ko.observableArray ([
{ name: Smith , contactNumber: 4556750345, email: smith123@gmail.com },
{ name: Jack , contactNumber: 6789358001, email: jack123@yahoo.com },
])
this.afterProcess = function(elements, data){
$(elements).css({color: magenta });
}
self.removeContact = function() {
self.friends.remove(this);
}
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
Let s carry out the following steps to see how the above code works −
Save the above code in template-afterrender.htm file.
Open this HTML file in a browser.
Here, afterProcess function is executed every time foreach is rendered.
Choosing Template Dynamically
If there are multiple templates available, then one can be chosen dynamically by making the name as observable parameter. Hence, the template value will be re-evaluated as the name parameter changes and in turn data will be re-rendered.
Example
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - Dynamic Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<span data-bind = "template: {
name: whichTemplate,
foreach: friends
}"></span>
<script type = "text/html" id = "only-phon">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
</script>
<script type = "text/html" id = "only-email">
<h3 data-bind = "text: name"></h3>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = ko.observableArray ([
{
name: Smith ,
contactNumber: 4556750345,
email: smith123@gmail.com ,
active: ko.observable(true)
},
{
name: Jack ,
contactNumber: 6789358001,
email: jack123@yahoo.com ,
active: ko.observable(false)
},
]);
this.whichTemplate = function(friends) {
return friends.active() ? "only-phon" : "only-email";
}
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
Let s carry out the following steps to see how the above code works −
Save the above code in template-dynamic.htm file.
Open this HTML file in a browser.
Template to be used is decided depending on the active flag value.
Using external string based engines
Native templating works perfectly with various control flow elements even with nested code blocks. KO also offers a way to integrate with external templating pbrary such as Underscore templating Engine or JQuery.tmpl.
As mentioned on the official site JQuery.tmpl is no longer under active development since December 2011. Hence, KO s native templating is only recommended instead of JQuery.tmpl or any other string-based template engine.
Please refer to the for more details on this.
Advertisements