Reacting to Changes in KnockoutJS: Choosing the Right Tool for the Right Job

http://www.knockmeout.net/2011/03/reacting-to-changes-in-knockoutjs.html

by Himanshu Joshi

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Total</th>
        <th></th>
    </tr>
    <tbody data-bind="template: { name: 'itemsTmpl', foreach: items }"></tbody>
</table>
<a href="#" data-bind="click: addItem">Add Item</a>

<script id="itemsTmpl" type="text/html">
    <tr>
        <td>
            <select data-bind="options: viewModel.productCatalog, optionsText: 'name', optionsValue: 'id', value: productId"></select>
        </td>
        <td>
            <input size="4" data-bind="value: editPrice" />
        </td>
        <td>
            <input size="3" data-bind="value: quantity" />
        </td>
        <td data-bind="fadeInText: total">   
        </td>
        <td>
            <a href="#" data-bind="click: $root.removeItem.bind($root)"> Remove </a>
        </td>
    </tr>
</script>

CSS

th, a { font-size: .85em; color: #444; }
td,th { padding: 5px; }
input, td { text-align: right; }

JavaScript

function Item(id, price, quantity, productId) {
    this.id = id;
    this.price = ko.observable(price);
    this.quantity = ko.observable(quantity);
    this.productId = ko.observable(productId);

    //dependentObservable to display total (not internationalized)
    this.total = ko.computed(function() {
        return viewModel.formatCurrency(this.quantity() * this.price());
    }, this);

    //writable dependentObservable to parse currency input 
    this.editPrice = ko.dependentObservable({
        //return a formatted price
        read: function() {
            return viewModel.formatCurrency(this.price());
        },
        //if the value changes, make sure that we store a number back to price
        write: function(newValue) {
            this.price(viewModel.parseCurrency(newValue));
        },
        owner: this
    });

    //manual subscription to default in the wholesale price whenever the product changes (technically we could do this in the write function of the writeable dependentObservable, but better to keep it focused on reading/writing the single field).
    this.productId.subscribe(function(newProductId) {
        var newProduct = ko.utils.arrayFirst(viewModel.productCatalog, function(product) {
            return product.id == newProductId;
        });
        this.price(newProduct.wholesale);
    }.bind(this));
}

var viewModel = {
    items: ko.observableArray([]),
    productCatalog: [
        {
        id: 1,
        name: "Pencil",
        wholesale: 1},
    {
        id: 2,
        name: "Pen",
        wholesale: 1},
    {
        id: 3,
        name: "Ruler",
        wholesale: 4},
    {
        id: 4,
        name: "Eraser",
        wholesale: 2}
    ],
    addItem: function() {
        this.items.push(new Item(0, 1, 1, 1));
    },
    removeItem: function(itemToRemove) {
        this.items.remove(itemToRemove);
    },
    //not internationalized, for sample purposes
    formatCurrency: function(value) {
        return "$" +...