This document provides an overview of the Knockout JavaScript library. It describes Knockout as a library that helps create rich, responsive user interfaces by linking a data model to UI elements through declarative bindings. Key features highlighted include declarative bindings, automatic UI refresh on data changes, dependency tracking, and templating. The document then discusses additional features like being a pure JavaScript library and working cross-browser. It addresses questions about how Knockout relates to other libraries like jQuery and how it differs. The rest of the document covers concepts like the MVVM pattern, view models with observable and computed properties, observable arrays, and built-in bindings for controlling elements, flow, and forms.

2. INTRODUCTION
Knockout is a JavaScript library that
helps you to create rich, responsive
display and editor user interfaces with
a clean underlying data model.

3. HEADLINE FEATURES
Declarative Binding
Automatic UI Refresh
Dependency Tracking
Templating

4. ADDITIONAL FEATURES
• Pure JavaScript Library
• Compact (around 13kb after zipping)
• Works on any mainstream browser
(IE 6+, Firefox 2+, Chrome, Safari, others)

5. SOME QUESTIONS
1. Is KO intended to compete with jQuery (or
Prototype, etc.) or work with it?
2. How is Knockout different?

6. TO SUMMARIES
KO doesn’t compete with
jQuery or similar low-level
DOM APIs. KO provides a
complementary, high-level way
to link a data model to a UI.
KO itself doesn’t depend on jQuery, but you can
certainly use jQuery at the same time, and
indeed that’s often useful if you want things like
animated transitions.

7. HOW TO USE
Download the latest version of
the Knockout JavaScript file
Reference the file using
a <script> tag somewhere on
your HTML pages
<script type='text/javascript' src='knockout-2.1.0.js'>
</script>
Installation

8. KEY KO CONCEPTS
MVVM & View Model
Observables
Bindings
Templates and Customization

9. MVVM (MODEL-VIEW-VIEW MODEL)
MODEL-VIEW-

10. VIEW MODELS
To create a view model
with KO, just declare any
JavaScript object. For
example,
var myViewModel = {
personName: 'Bob',
personAge: 123
};

11. USING VIEWMODEL INSIDE A VIEW
Example to create a very simple view of
that view model using a declarative
binding :
The name is <span data-bind="text:
personName"></span>

12. ACTIVATING KNOCKOUT.JS
ko.applyBindings(myViewModel);
The name is <span>Bob</span>

13. OBSERVABLES
Question: How can KO know when
parts of your view model change?
Answer: You need to declare your
model properties as observables,
because these are special JavaScript
objects that can notify subscribers
about changes, and can automatically
detect dependencies.

14. DECLARING OBSERVABLE PROPERTIES
var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};

15. R/W OBSERVABLE PROPERTIES
To read myViewModel.personName()
To write myViewModel.personName('Mary')
To write values to multiple observable properties
myViewModel.personName(‘PN1').personAge(50)
So, when we write data-bind="text: personName",
the text binding registers itself to be notified
when personName changes.

16. COMPUTED OBSERVABLES
These are functions that are dependent on one or
more other observables, and will automatically
update whenever any of these dependencies change.
function AppViewModel() {
this.firstName = ko.observable('Bob');
this.lastName = ko.observable('Smith');
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}

17. COMPUTED OBSERVABLE – DECOMPOSING USER INPUT

18. COMPUTED OBSERVABLE – A VALUE CONVERTER

19. COMPUTED OBSERVABLE – FILTERING AND VALIDATING USER INPUT

20. DETERMINING IF A PROPERTY IS A COMPUTED
OBSERVABLE

21. OBSERVABLE ARRAYS
If you want to detect and respond to changes on
one object, you’d use observables. If you want to
detect and respond to changes of a collection of
things, use an observable Array.
This is useful in many
scenarios where you’re
displaying or editing multiple
values and need repeated
sections of UI to appear and
disappear as items are added
and removed.

22. READING INFORMATION FROM AN OBSERVABLE ARRAY
// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray([
{ name: "Bungle", type: "Bear" },
{ name: "George", type: "Hippo" },
{ name: "Zippy", type: "Unknown" }
]);
FUNCTIONS FOR OBSERVABLE COLLECTION
indexOf, slice, pop, pus, unshift, reverse, sort, splice,
remove, removeAll, destroy, destroyAll.

23. KNOCKOUT BUILT IN BINDINGS

24. CONTROLLING TEXT AND APPEARANCE
The visible binding
The text binding
The html binding
The css binding
The style binding
The attr binding

25. THE VISIBLE BINDING

26. THE TEXT BINDING

27. THE HTML BINDING

28. THE CSS BINDING

29. THE STYLE BINDING

30. THE ATTR BINDING

31. CONTROLLING FLOW

32. THE FOREACH BINDING

33. THE IF BINDING

34. THE IFNOT BINDING

35. THE WITH BINDING

36. WORKING WITH FORM FIELDS
The click binding
The event binding
The submit binding
The enable binding
The disable binding
The value binding
The hasfocus binding
The checked binding
The options binding
The selectedOptions binding
The uniqueName binding

37. THE CLICK BINDING

38. ALLOWING THE DEFAULT CLICK ACTION
By default, Knockout will prevent the click event from taking
any default action.
However, if you do want to let the default click action proceed,
just return true from your click handler function.
PREVENTING THE EVENT FROM BUBBLING
<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>

39. THE EVENT BINDING

40. THE SUBMIT BINDING

41. THE ENABLE BINDING

42. THE DISABLE BINDING
This is the mirror image of the enable binding.

43. THE VALUE BINDING

44. THE HASFOCUS BINDING

45. THE CHECKED BINDING

46. THE OPTIONS BINDING

47. THE SELECTED OPTIONS BINDING

48. THE UNIQUENAME BINDING

50. Thanks & Regards
Narendra Kumar P
Eminosoft India Pvt.Ltd.