KnockoutJS - Basics - Example 1

This example illustrates the setup of a basic viewmodel, programmatic subscription, and simple data-binding.

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"/>

JavaScript

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

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);    
});