Knockoutjs UG meeting presentation

1,099 views
1,020 views

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,099
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knockoutjs UG meeting presentation

  1. 1. www.dotnet.lv
  2. 2. Valdis IljuconoksSoftware ArchitectMicrosoft MVPGeta Latvia, Viiar Consultingvaldis.iljuconoks@dotnet.lvhttp://dotnet.lv/blogs/vi
  3. 3. knockout.js
  4. 4. $(function () { $("#btn").click(function () { $.getJSON("/api/customers").then(function (customers) { $.each(customers, function () { $("<li>").text(this.FirstName + " " +this.LastName).appendTo("#customers"); }); }); });});
  5. 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. 6. Observables Bindings UtilitiesData features Plug-ins
  7. 7. Observables
  8. 8. Observable Observable ArrayDependent Observables (Computed)
  9. 9. // read valuevar val = viewmodel.name();// set valueviewmodel.name(“Valdis”) Observables Functions (not all browsers support getters and setters)
  10. 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. 11. indexOf(item) slice(2, 4) push(item) pop() unshift(item) shift() reverse() sort()remove(item) removeAll()
  12. 12. viewmodel.fullname = ko.computed(function() { return this.name() + “ ” + this.surname();}) Dependent Observables (Computed) “this” keyword has to be managed
  13. 13. Observables Bindings UtilitiesData features Plug-ins
  14. 14. Bindings
  15. 15. Built-in BindingsCustom bindings
  16. 16. Built-in Bindings
  17. 17. data-bind=“” value: html: text: css: style: visible: template: …
  18. 18. Control-flow bindings
  19. 19. data-bind=“” foreach: if: ifnot: with: …
  20. 20. Custom bindings(most powerful extension point)
  21. 21. Event binding
  22. 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. 23. ko.bindingHandlers.yourBindingName = { init: update:} Custom bindings Define your own behavior
  24. 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. 25. Observables Bindings UtilitiesData features Plug-ins
  26. 26. Utilities
  27. 27. ko.utils.arrayFilter()
  28. 28. ko.utils.arrayFilter() ko.utils.arrayFirst() ko.utils.arrayForEach() ko.utils.arrayIndexOf() ko.utils.arrayMap() ko.utils.compareArrays()ko.utils.unwrapObservable() …
  29. 29. Observables Bindings UtilitiesData features Plug-ins
  30. 30. Data features
  31. 31. ko.toJS()ko.toJSON()
  32. 32. Observables Bindings UtilitiesData features Plug-ins
  33. 33. Plug-ins
  34. 34. ko.mapping.*
  35. 35. Observables Bindings UtilitiesData features Plug-ins
  36. 36. Resources
  37. 37. knockoutjs.com blog.stevensanderson.com knockmeout.comstackoverflow.com -> “knockoutjs”groups.google.com -> “knockoutjs”
  38. 38. must have to build interactive UI
  39. 39. ?
  40. 40. Valdis IljuconoksSoftware ArchitectMicrosoft MVPGeta Latvia, Viiar Consultingvaldis.iljuconoks@dotnet.lvhttp://dotnet.lv/blogs/vi
  41. 41. www.dotnet.lv

×