Presentation of march Latvian .Net User Group meeting in Riga.

1. www.dotnet.lv

2. Valdis Iljuconoks
Software Architect
Microsoft MVP
Geta Latvia, Viiar Consulting
valdis.iljuconoks@dotnet.lv
http://dotnet.lv/blogs/vi

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>

6. Observables
Bindings
Utilities
Data features
Plug-ins

7. Observables

8. Observable
Observable Array
Dependent Observables (Computed)

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

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

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

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

13. Observables
Bindings
Utilities
Data features
Plug-ins

14. Bindings

15. Built-in Bindings
Custom bindings

16. Built-in Bindings

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

18. Control-flow bindings

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

20. Custom bindings
(most powerful extension point)

21. Event binding

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

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

24. 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”

25. Observables
Bindings
Utilities
Data features
Plug-ins

26. Utilities

27. ko.utils.arrayFilter()

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

29. Observables
Bindings
Utilities
Data features
Plug-ins

30. Data features

31. ko.toJS()
ko.toJSON()

32. Observables
Bindings
Utilities
Data features
Plug-ins

33. Plug-ins

34. ko.mapping.*

35. Observables
Bindings
Utilities
Data features
Plug-ins

36. Resources

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

38. must have to build interactive UI

39. ?

40. Valdis Iljuconoks
Software Architect
Microsoft MVP
Geta Latvia, Viiar Consulting
valdis.iljuconoks@dotnet.lv
http://dotnet.lv/blogs/vi

41. www.dotnet.lv