Knockout template

A simple example that shows how to use template binding with Knockoutjs.

by emadb

HTML

<div>
        <input type="text" data-bind="value: newDescription" />
        <input type="text" data-bind="value: newQuantity" />
        <button data-bind="click: add">+</button>
    </div>

    <ul data-bind="template: { name: itemTemplate, foreach: products }">
    </ul>

<script type="text/html" id="normal-row">
    <li>
        <span data-bind="text: description"></span>
        <span data-bind="text: quantity"></span>
    </li>
</script>

<script type="text/html" id="out-of-stock-row">
    <li style="color:#777777">
        <span data-bind="text: description"></span>
        <span>this product is out of stock <a href="#">(place an order)</a></span>
    </li>
</script>

JavaScript

function ProductViewModel(desc, qta) {
        this.description = ko.observable(desc);
        this.quantity = ko.observable(qta);
    }

    function ListViewModel(items) {
        var self = this;
        this.products = ko.observableArray(items);

        this.newDescription = ko.observable();
        this.newQuantity = ko.observable();
        
        this.add = function(){
            var newP = new ProductViewModel(self.newDescription(), self.newQuantity());
            self.products.push(newP);
        }

        this.itemTemplate = function(product){
            return product.quantity() > 0 ? 'normal-row':'out-of-stock-row'
        };
    }

    var p1 = new ProductViewModel('desc1', 10);
    var p2 = new ProductViewModel('desc2', 0);
    var p3 = new ProductViewModel('desc3', 30);


    var vm = new ListViewModel([p1, p2, p3]);
    ko.applyBindings(vm);