Template binding is a sophisticated way to bind a template with associated DOM result of rendering a template. Template binding smart to build a sophisticated interface structure may be repeated and nested as per the function of view model data.
There are two type of template binding
Native templating : Native templating generally used for printing for each , if , with control flow bindings. This type of bonding capture the HTML markup element and use as a template rendering against data item.
String based templating : String based computing is a way to connect to third party template. By passing model value to the external template , inject the templates string to the HTML document.
Parameters
To make a template the following properties can be sent as parameter-value to template.
- name − The ID of an element that contains the template you wish to render .
- nodes − This represents an array of DOM nodes to be used as the template.This is optioanl if you have also passed a nonempty value for name.
- data − object data will be render via the template.
- if − The Template will only be rendered only if this parameter expression evaluates to true.
- foreach − To loop template in foreach format.
- as − This is to make an alias in foreach element.
- afterAdd, afterRender, beforeRemove − Callable functions to be executed depending on rendered DOM elements.
A Simple named template
In this example, we have used person template and the template is
wrapped with script tag. To prevent the template as JavaScript execution it typed
dummy is added in the scripted.
Example
<!DOCTYPE
html>
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"
type="text/javascript"></script>
<div
data-bind="template:
{ name: 'person-template', data: myName }">
</div>
<script
type="text/html"
id="person-template">
</script>
<script
type="text/javascript">
var
myViewModel = function
()
{
this.myName
= { FirstName: 'John',
LastName: 'Rich'
};
};
ko.applyBindings(new
myViewModel());
</script>
</body>
Output :
John
Rich
A Simple named template with foreach
The following is a example of foreach parameter along with template name.
Example
<!DOCTYPE
html>
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"
type="text/javascript"></script>
<div
data-bind="template:
{ name: 'person-template', foreach: myName }">
</div>
<script
type="text/html"
id="person-template">
</script>
<script
type="text/javascript">
var
myViewModel = function
()
{
this.myName
= [{ FirstName: 'John
1',
LastName: 'Rich
1'
},
{
FirstName: 'John
2',
LastName: 'Rich
2'
},
{
FirstName: 'John
3',
LastName: 'Rich
3'}]
};
ko.applyBindings(new
myViewModel());
</script>
</body>
Output :
John 1
Rich 1
John 2
Rich 2
John 3
Rich 3
Creating alias Using as Keyword for foreach Items
The examples for how and alias can be created with foreach.
Example
<!DOCTYPE
html>
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"
type="text/javascript"></script>
<ul
data-bind="template:
{ name: 'seasonTemplate', foreach: myData, as: 'season' }"></ul>
<script
type="text/html"
id="seasonTemplate">
</script>
<script
type="text/html"
id="monthTemplate">
|
</script>
<script>
var
viewModel = {
myData:
ko.observableArray([
{
FistName: 'John
1',
LastName: 'Rich
1',
Marks: [90, 100, 95] },
{
FistName: 'John
2',
LastName: 'Rich
2',
Marks: [89, 99, 96] },
{
FistName: 'John
3',
LastName: 'Rich
3',
Marks: [88, 98, 97] },
{
FistName: 'John
4',
LastName: 'Rich
4',
Marks: [87, 97, 98] }
])
};
ko.applyBindings(viewModel);
</script>
</body>
Output :
Using afterAdd, beforeRemove, and afterRender
In some situation, you need some extra code to be puted after some
event. After ad function is invoke when a new item is added in array
Example
<!DOCTYPE
html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"
type="text/javascript"></script>
<script
src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>
</head>
<body>
<div
data-bind="template:
{
name:
'person-template',
foreach:
myPerson ,
afterRender:
RenderMe
}">
</div>
<script
type="text/html"
id="person-template">
</script>
<script
type="text/javascript">
function
viewModel() {
this;
this.myPerson
= ko.observableArray([
{
fisrtName: 'Jonh
1',
lastName: 'Rich
1'
},
{
fisrtName: 'Jonh
1',
lastName: 'Rich
2'},
])
this.RenderMe
= function
(elements, data) {
$(elements).css({
color: 'Green'
});
}
}
ko.applyBindings(viewModel);
</script>
</body>
</html>
Output
Jonh 1
Rich 1
Jonh 1
Rich 2
