KnockoutJS - Building Up - Example 1

This example illustrates the setup of a viewmodel with a dependent observable function

by techarch

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<label for="saving-goal-amount">Saving Goal Amount:</label>
<input id="saving-goal-amount" data-bind="value: savingGoalAmount"/><br/>

<label for="saving-max-duration">Saving Max Duration (In Months):</label>
<input id="saving-max-duration" data-bind="value: savingMaxDuration" /><br/>

<label for="saving-target-per-month">Saving Target Per Month:</label>
<span id="saving-target-per-month" data-bind="text: savingTargetPerMonth()" /><br/>

JavaScript

$(document).ready(function() {
    // Set up the ViewModel
    var viewModel = {
        savingGoalAmount: ko.observable(500),
        // dollars
        savingMaxDuration: ko.observable(6) // months
        // ... more attributes ...
    };

    // Derived data
    viewModel.savingTargetPerMonth = ko.dependentObservable(function() {
        return this.savingGoalAmount() / this.savingMaxDuration();
    }, viewModel),

    viewModel.savingGoalAmount.subscribe(function(newValue) {
        // Show the updated value on the FireBug's console
        console.info("savingGoalAmount is now " + newValue);
    });

    // Get KnockoutJS to apply bindings / subscriptions
    ko.applyBindings(viewModel);

    $(document).data("MYViewModel", viewModel);

    viewModel.savingGoalAmount(600);
});