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