Categories: KnockoutJS

KnockoutJS – Templating

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>

Namaste UI

For any types of queries, you can contact us on info[at]namasteui.com.