Dependency Tracking – KnockoutJS

Using a single object called dependency tracker i.e. ko.dependencyDetection you can determine when the value get updated. When you declare a computed observable, KO immediately gets its initial value and updated computed observable.

Lets see an example for Dependency Tracking:

<!DOCTYPE html>
<html>
<head>
<title>Dependency Tracking - KnockoutJS</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
</head>
<body>
<div>
<form data-bind="submit: addCountry">
<b>Add Country:</b>
<input data-bind='value: newCountry, valueUpdate: "afterkeydown"'/>
<button type="submit" data-bind="enable: newCountry().length > 0">Add Country</button>
<p><b>Your Country List:</b></p>
<select multiple="multiple" width="50" height="auto" data-bind="options: countries"> </select>
</form>
</div>
<script>
var AddCountry = function(countries) {
this.countries = ko.observableArray(countries);
this.newCountry = ko.observable("");
this.addCountry = function() {
if (this.newCountry() != "") {
this.countries.push(this.newCountry());
this.newCountry("");
}
}.bind(this);
};

ko.applyBindings(new AddCountry(["India", "Australia", "South Africa", "Zimbabwe"]));
</script>
</body>
</html>