KnockoutJS Tutorial
KnockoutJS Resources
Selected Reading
- KnockoutJS - Components
- KnockoutJS - Templating
- KnockoutJS - Dependency Tracking
- KnockoutJS - Declarative Bindings
- Computed Observables
- KnockoutJS - Observables
- KnockoutJS - MVVM Framework
- KnockoutJS - Application
- KnockoutJS - Environment Setup
- KnockoutJS - Overview
- KnockoutJS - Home
KnockoutJS Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
KnockoutJS - Dependency Tracking
KnockoutJS - Dependency Tracking
KnockoutJs automatically tracks the dependencies when the values get updated. It has a single object called dependency tracker (ko.dependencyDetection) which acts as an intermediate between the two parties for subscribing the dependencies.
Following is the algorithm for dependency tracking.
Step 1 − Whenever you declare a computed observable, KO immediately invokes its evaluator function to get its initial value.
Step 2 − Subscription is set up to any observable that the evaluator reads. In an apppcation, the old subscriptions which are no longer used are disposed.
Step 3 − KO finally notifies the updated computed observable.
Example
<!DOCTYPE html>
<html>
<head>
<title>KnockoutJS How Dependency Tracking Works</title>
<!-- CDN s-->
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<span>
<form data-bind = "submit: addFruits">
<b>Add Fruits:</b>
<input data-bind = value: fruitToAdd, valueUpdate: "afterkeydown" />
<button type = "submit" data-bind = "enable: fruitToAdd().length > 0">Add</button>
<p><b>Your fruits pst:</b></p>
<select multiple = "multiple" width = "50" data-bind = "options: fruits"> </select>
</form>
</span>
<script>
var Addfruit = function(fruits) {
this.fruits = ko.observableArray(fruits);
this.fruitToAdd = ko.observable("");
this.addFruits = function() {
if (this.fruitToAdd() != "") {
this.fruits.push(this.fruitToAdd()); // Adds a fruit
this.fruitToAdd(""); // Clears the text box
}
}.bind(this); // "this" is the view model
};
ko.applyBindings(new Addfruit(["Apple", "Orange", "Banana"]));
</script>
</body>
</html>
Output
Let s carry out the following steps to see how the above code works −
Save the above code in dependency_tracking.htm file.
Open this HTML file in a browser.
Enter any fruit name and cpck the Add button.
Controlpng Dependencies Using Peek
The Computed Observable can be accessed without creating a dependency, by using the peek function. It controls the Observable by updating the computed property.
Example
<!DOCTYPE html>
<html>
<head>
<title>KnockoutJs Controlpng Dependencies Using Peek</title>
<!-- CDN s-->
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<span class = "logblock">
<h3>Computed Log</h3>
<pre class = "log" data-bind = "html: computedLog"></pre>
</span>
<script>
function AppData() {
this.firstName = ko.observable( John );
this.lastName = ko.observable( Burns );
this.computedLog = ko.observable( Log: );
this.fullName = ko.computed(function () {
var value = this.firstName() + " " + this.lastName();
this.computedLog(this.computedLog.peek() + value + ; <br/> );
return value;
}, this);
this.step = ko.observable(0);
this.next = function () {
this.step(this.step() === 2 ? 0 : this.step()+1);
};
};
ko.applyBindings(new AppData());
</script>
</body>
</html>
Output
Let s carry out the following steps to see how the above code works −
Save the above code in dependency_tracking_peek.htm file.
Open this HTML file in a browser.
Observations
Ignoring Dependencies Within a Computed Dependency
The ko.ignoreDependencies function helps ignore those dependencies that you don t want to track within the computed dependencies. Following is its syntax.
ko.ignoreDependencies( callback, callbackTarget, callbackArgs );
Why Circular Dependencies Aren t Meaningful
If KO is evaluating a Computed Observable, then it will not restart an evaluation of the dependent Computed Observable. Hence, it doesn t make sense to include cycles in your dependency chains.
Advertisements