Using template is very easy to incorporate into website. For a duplication you don’t need to write over and over again just call them repetitively.
Parameters:
Following properties can be sent as a parameter-value:
name, nodes, data, if, foreach, as, afterAdd, afterRender, beforeRemove.
Lets see an example of Templating:
<!DOCTYPE html>
<head>
<title>KnockoutJS - Templating</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<h2>Products List</h2>
<div data-bind="template: { name: 'product-template', foreach: products }"></div>
<script type="text/html" id="product-template">
<div>
Product: <span data-bind="text: product"></span><br />
Quantity: <span data-bind="text: qty"></span><br />
Price: <span data-bind="text: price"></span><br />
<button data-bind="click: $root.removeProduct">Remove</button><br /><br />
</div>
</script>
<script type="text/javascript">
function MyViewModel() {
self= this;
this.products = ko.observableArray([
{ product: 'Cakes', qty: 15, price: '220.50' },
{ product: 'Biscuits', qty: 20, price: '117.65' },
{ product: 'Breads', qty: 7, price: '55.00' }
])
self.removeProduct = function(){
self.products.remove(this);
}
}
ko.applyBindings(new MyViewModel());
</script>
</body>
</html>