Knockout JS Development - a Quick Understanding by Udayakumar Mathivanan

2. With and Without Knockout

3. UI Patterns
Data &
Bindings
Separation
of Concerns
Structured
JavaScript

9. 6+ 2+
Separates behavior and structure
Declarative bindings
Observables

13. data-bind="value: firstName"
Declarative
Binding
ko.observable
ko.applyBindings
Create an
Observable
Bind the ViewModel
to the View

14. Source object
Push from Source to Target

15. With and Without Knockout
Observable

16. Taylor 110
Taylor 914ceTaylor 914ce
Taylor 110

17. data-bind
Declarative
Binding
product: {
id: 1001,
model: ko.observable("Taylor 314ce"),
salePrice: ko.observable(1199.95)
}
ko.applyBindings(data);
Source object
Bind Source to Target, & Vice Versa

18. With and Without Knockout
Observable
Computed

19. computed dependentObservable

20. ko.computed
this this.qty
vm
observables
owner

21. With and Without Knockout
Observable
Computed
ObservableArray

23. var myViewModel = {
salesPerson: ko.observable("John"),
empNum: ko.observable(39811),
products: ko.observableArray([
{ model: "Taylor 314CE", price: 1749, id=321 },
{ model: "Martin D40", price: 1899, id=479 }
])
};
<span data-bind="text: products().length"></span>
Pre-populating
Operating on
observableArray

24. With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings

25. enable value
options
value
optionsText
optionsValue
Built into Knockout
Binding for element
attributes
Multiple binding
expressions

26. attr checked click css disable
enable event hasfocus html options
optionsText optionsValue selectedOptions style submit
text uniqueName value visibletext value
click disable
enable
attr
Display and state bindings
Text and value bindingsBindings for specific attributes
visible
event
Event bindings

27. With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates

28. • If truthy conditionif
• If falsy conditionifnot
• Execute for each item in a listforeach
• Shortcut to execute for the objectwith

29. template: {name: 'productsTmpl', foreach: lines}
Pass the context for the template with “foreach”
productsTmpl

30. if: lines().length > 0
Any “truthy” expression

31. with: model
text: brand
text: name
<div>
<div data-bind="text: model().brand"></div>
<div data-bind="text: model().name"></div>
</div>

32. All Part of the
Native Template Engine
in Knockout

33. With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates
Custom Binding Handlers

35. function(element, valueAccessor
function(element, valueAccessor
Runs first time the binding is
evaluated
Runs after init and every
time one of its observables
changes

36. element, valueAccessor, allBindingsAccessor, viewModel
valueAccessor
element
element, valueAccessor, allBindingsAccessor, viewModel
valueAccessor
element element
Bound DOM
element
What is passed
to the binding
All other bindings
on same element
The
viewmodel

37. With and Without Knockout
Observable
Computed
ObservableArray
Built In Bindings
Templates