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.
<!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> Let’s face it. Tech buzzwords get thrown around a lot—especially when it comes to how…
In today’s digital world, the boundaries between technology, finance, and innovation are rapidly disappearing. Businesses…
Backyard gatherings like BBQs, family reunions, and garden parties are an exciting way to enjoy…
Marketers are always on the lookout for more effective ways to reach their target audiences.…
Does your phone control your mind more than you control your phone? Modern life exploits…
Did you know that the prostate continues growing throughout a man's entire life, making BPH…