2. What is Knockout.js ?
Knockout is a JavaScript library that helps us to create
rich, responsive and dynamic display with a clean
underlying data model.
3. Key points
Free, open source (MIT license)
Pure JavaScript — works with any web framework
Small & lightweight — 40kb minified
... reduces to 14kb when using HTTP compression
No dependencies
Supports all mainstream browsers
IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)
Fully documented
API docs, live examples, and interactive tutorials included
4. Features it offers
Declarative Bindings
Easily associate DOM elements with model data using a concise, readable
syntax
Automatic UI Refresh
Whenever data model's state changes, UI updates automatically
Dependency Tracking
Implicitly set up chains of relationships between model data, to transform
and combine it
Templating
Quickly generate sophisticated, nested UIs as a function of your model data
5. Is it different from jQuery or any
other javascript framework?
jQuery/js Frameworks Knockout
Basically a replacement for the Knockout provides a
clunky, inconsistent DOM APIs complementary, high-level way
we had to put up with in the to link a data model to a UI.
past.
A low-level way to manipulate
elements and event handlers in a
web page.
Note: Both can be used in solution seamlessly.
7. Let’s Bind
//Javascript Code
<script>
var myViewModel = {
personName: ‘Vivek',
personAge: 27
};
//Restrict the binding to this span only
ko.applyBindings(myViewModel, document.getElementById(‘name'));
</script>
//HTML Code
The name is <span id=“name” data-bind="text: personName"></span>
8. Observables
Last example was the basic one as it was kind of one
way binding i.e. the ViewModel’s property will show
up in UI but if we want that on every change of
property in ViewModel the UI should also get
reflected then make it observable property:
var myViewModel = {
personName: ko.observable(Vivek'),
personAge: ko.observable(27)
};
9. Explicitly subscribing to
observables
In the last example if we want to listen the value
change of personName property:
myViewModel.personName.subscribe(function(newValue) {
alert("The person's new name is " + newValue);
});
If you want to terminate the subscription:
var subscription = myViewModel.personName.subscribe(function(newValue) {
alert("The person's new name is " + newValue);
});
subscription.dispose(); // no longer want notifications
10. Computed Observables
function myViewModel() {
this.firstName = ko.observable(„Johnny');
this.lastName = ko.observable(„English');
}
Here in above ViewModel if you want to show Full
name which you want it to be dynamic(observable) i.e.
full name changes with a change in first/last name
function myViewModel() {
this.firstName = ko.observable(„Johnny');
this.lastName = ko.observable(„English');
this.fullName = ko.computed(function(){
return this.firstName() +” “+ this.lastName();
}, this);
}
//HTML Code
The name is <span data-bind="text: fullName"></span>
11. Bindings
Types of binding available:
visible, text, html, css, style, attr
“visible”
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
<script type="text/javascript">
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
};
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true); // ... now it's visible again
</script>
12. “text”
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
viewModel.myMessage("Hello, world!"); // Text appears
</script>
“html”
<div data-bind=“html: details"></div>
<script type="text/javascript">
var viewModel = {
details: ko.observable() // Initially blank
};
viewModel.details("<em>For further details, view the report <a
href='report.html'>here</a>.</em>"); // HTML content appears
</script>
13. “css”
<div data-bind="css: { error: limit() < 0 }">
Range Information
</div>
<script type="text/javascript">
var viewModel = {
limit: ko.observable(100) //say a valid range is 0-100
};
viewModel.limit(-10); // Causes the “error" class to be applied
</script>
“style”
<div data-bind="style: { error: limit() < 0 ? ‘red’ :’black’}">
Range Information
</div>
<script type="text/javascript">
var viewModel = {
limit: ko.observable(100) //say a valid range is 0-100
};
viewModel.limit(-10); // Causes the DIV’s content to go red
</script>
14. “attr”
<a data-bind="attr: { href: url, title: details }">
Report
</a>
<script type="text/javascript">
var viewModel = {
url: ko.observable("year-end.html"),
details: ko.observable("Report including final year-end statistics")
};
</script>
For custom attributes you can write:
<a data-bind="attr: { ‘custom-attribute’: customvValue}">
Report
</a>
Note: attribute here is enclosed in quotes.
21. Template Binding
Native templating: Uses HTML markup contained in the body
only. Built into knockout and doesn’t require any external library.
String-based templating: Knockout passes the model values
to the external template engine and inject the resulting markup back
into our document. Similar to what we were doing it till now using
jQuery template. Other library being Underscore template engines.
