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> The coronavirus outbreak has drastically changed the way we live our lives. Yes, that's absolutely…
Sales and marketing teams help attract, convert, and retain customers to ensure an organization’s long-term…
Are you an owner of a small business who’s trying to come up with ways…
Introduction When patients bring me their lab reports, the confusion is almost always the same.…
Are you excited about remodeling your house after a long time? Perhaps if you're planning…
The practice of yoga teaches us to be present, patient and mindful of our decisions.…