This document discusses the key features of knockout.js including observables, bindings, utilities, data features, and plugins. Observables allow two-way data binding between view models and UI elements. Built-in bindings update the DOM based on observable changes. Utilities provide helper functions. Data features convert view models to JSON. Plugins extend knockout's functionality.

2. Valdis Iljuconoks
Technical Fellow, Software Architect
Visual Studio ALM evangelist
Microsoft MVP
http://www.tech-fellow.lv | @tech_fellow
Geta AS, Tech Fellow Consulting, Latvian .Net UG
valdis.iljuconoks@outlook.com

3. knockout.js

4. $(function () {
$("#btn").click(function () {
$.getJSON("/api/customers").then(function (customers) {
$.each(customers, function () {
$("<li>").text(this.FirstName + " " +
this.LastName).appendTo("#customers");
});
});
});
});

5. $(function () {
$("#btn").click(function () {
$.getJSON("/api/customers").then(function (customers) {
var html = tmpl("cust_tmpl", { customers: customers });
$("#customers").html(html);
});
});
});
<script type="text/html" id="cust_tmpl">
{{each customers}}
<li><a href="/api/customer/${Id}">${FirstName}
${LastName}</a></li>
{{/each}}
</script>

7. Observables
Bindings
Utilities
Data features
Plug-ins

8. Observables

9. Observable
Observable Array
Dependent Observables (Computed)

10. Observables
Functions (not all browsers support getters and setters)
// read value
var val = viewmodel.name();
// set value
viewmodel.name(“Valdis”)

11. Observable Array
Use with collections
Detect changes only within an array
Use knockout array methods (cross-browser)
viewmodel.customers = ko.obserableArray();
viewmodel.customers.push(new customer());

12. indexOf(item)
slice(2, 4)
push(item)
pop()
unshift(item)
shift()
reverse()
sort()
remove(item)
removeAll()

13. Dependent Observables (Computed)
“this” keyword has to be managed
viewmodel.fullname = ko.computed(function() {
return this.name() + “ ” + this.surname();
})

14. Observables
Bindings
Utilities
Data features
Plug-ins

15. Bindings

16. Built-in Bindings
Control-flow bindings
Custom bindings

17. Built-in Bindings
Control-flow bindings
Custom bindings

18. data-bind=“”
value:
html:
text:
css:
style:
visible:
template:
…

19. Built-in Bindings
Control-flow bindings
Custom bindings

20. data-bind=“”
foreach:
if:
ifnot:
with:
…

21. Built-in Bindings
Control-flow bindings
Custom bindings
(most powerful extension point)

22. Event binding

23. addOnEnter: function(model, event) {
var keycode = (event.which ? event.which :
event.keyCode);
if (keycode === 13) {
viewModel.addTCustomer();
}
return true;
}
data-bind=“event: {keypress: addOnEnter}”

24. Custom binding

25. Custom bindings
Define your own behavior
ko.bindingHandlers.yourBindingName = {
init:
update:
}

26. ko.bindingHandlers.executeOnEnter = {
init:
function(element, valueAccessor, allBindingAccessor, viewModel) {
var value = valueAccessor();
$(element).keypress(function(event) {
var keycode = (event.which ? event.which : event.keyCode);
if (keycode === 13) {
value.call(viewModel);
return false;
}
return true;
});
}
};
data-bind=“executeOnEnter: addCustomer”

27. Observables
Bindings
Utilities
Data features
Plug-ins

28. Utilities

29. ko.utils.arrayFilter()

30. ko.utils.arrayFilter()
ko.utils.arrayFirst()
ko.utils.arrayForEach()
ko.utils.arrayIndexOf()
ko.utils.arrayMap()
ko.utils.compareArrays()
ko.utils.unwrapObservable()
…

31. Observables
Bindings
Utilities
Data features
Plug-ins

32. Data features

33. ko.toJS()
ko.toJSON()

34. Observables
Bindings
Utilities
Data features
Plug-ins

35. Plug-ins

36. ko.mapping.*

37. Observables
Bindings
Utilities
Data features
Plug-ins

38. Resources

39. knockoutjs.com
blog.stevensanderson.com
knockmeout.com
stackoverflow.com -> “knockoutjs”
groups.google.com -> “knockoutjs”

40. nice to have
to build interactive UI

41. ?

42. Valdis Iljuconoks
Technical Fellow, Software Architect
Visual Studio ALM evangelist
Microsoft MVP
http://www.tech-fellow.lv | @tech_fellow
Geta AS, Tech Fellow Consulting, Latvian .Net UG
valdis.iljuconoks@outlook.com