KnockoutJS – Templating

Components of KnockoutJS

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.

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>
   <title>KnockoutJS - Templating</title>
   <script src="" type="text/javascript"></script>

    <h2>Products List</h2>
    <div data-bind="template: { name: 'product-template', foreach: products }"></div>

    <script type="text/html" id="product-template">
    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 />

    <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(){
    ko.applyBindings(new MyViewModel());

Leave a Reply

Your email address will not be published. Required fields are marked *