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 (Author)

Namaste UI collaborates closely with clients to develop tailored guest posting strategies that align with their unique goals and target audiences. Their commitment to delivering high-quality, niche-specific content ensures that each guest post not only meets but exceeds the expectations of both clients and the hosting platforms. Connect with us on social media for the latest updates on guest posting trends, outreach strategies, and digital marketing tips. For any types of guest posting services, contact us on info[at]namasteui.com.