Client side development with knockout.js

813 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
813
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Client side development with knockout.js

  1. 1. Valdis IljuconoksTechnical Fellow, Software ArchitectVisual Studio ALM evangelistMicrosoft MVPhttp://www.tech-fellow.lv | @tech_fellowGeta AS, Tech Fellow Consulting, Latvian .Net UGvaldis.iljuconoks@outlook.com
  2. 2. knockout.js
  3. 3. $(function () {$("#btn").click(function () {$.getJSON("/api/customers").then(function (customers) {$.each(customers, function () {$("<li>").text(this.FirstName + " " +this.LastName).appendTo("#customers");});});});});
  4. 4. $(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>
  5. 5. ObservablesBindingsUtilitiesData featuresPlug-ins
  6. 6. Observables
  7. 7. ObservableObservable ArrayDependent Observables (Computed)
  8. 8. ObservablesFunctions (not all browsers support getters and setters)// read valuevar val = viewmodel.name();// set valueviewmodel.name(“Valdis”)
  9. 9. Observable ArrayUse with collectionsDetect changes only within an arrayUse knockout array methods (cross-browser)viewmodel.customers = ko.obserableArray();viewmodel.customers.push(new customer());
  10. 10. indexOf(item)slice(2, 4)push(item)pop()unshift(item)shift()reverse()sort()remove(item)removeAll()
  11. 11. Dependent Observables (Computed)“this” keyword has to be managedviewmodel.fullname = ko.computed(function() {return this.name() + “ ” + this.surname();})
  12. 12. ObservablesBindingsUtilitiesData featuresPlug-ins
  13. 13. Bindings
  14. 14. Built-in BindingsControl-flow bindingsCustom bindings
  15. 15. Built-in BindingsControl-flow bindingsCustom bindings
  16. 16. data-bind=“”value:html:text:css:style:visible:template:…
  17. 17. Built-in BindingsControl-flow bindingsCustom bindings
  18. 18. data-bind=“”foreach:if:ifnot:with:…
  19. 19. Built-in BindingsControl-flow bindingsCustom bindings(most powerful extension point)
  20. 20. Event binding
  21. 21. addOnEnter: function(model, event) {var keycode = (event.which ? event.which :event.keyCode);if (keycode === 13) {viewModel.addTCustomer();}return true;}data-bind=“event: {keypress: addOnEnter}”
  22. 22. Custom binding
  23. 23. Custom bindingsDefine your own behaviorko.bindingHandlers.yourBindingName = {init:update:}
  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. ObservablesBindingsUtilitiesData featuresPlug-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. ObservablesBindingsUtilitiesData featuresPlug-ins
  30. 30. Data features
  31. 31. ko.toJS()ko.toJSON()
  32. 32. ObservablesBindingsUtilitiesData featuresPlug-ins
  33. 33. Plug-ins
  34. 34. ko.mapping.*
  35. 35. ObservablesBindingsUtilitiesData featuresPlug-ins
  36. 36. Resources
  37. 37. knockoutjs.comblog.stevensanderson.comknockmeout.comstackoverflow.com -> “knockoutjs”groups.google.com -> “knockoutjs”
  38. 38. nice to haveto build interactive UI
  39. 39. ?
  40. 40. Valdis IljuconoksTechnical Fellow, Software ArchitectVisual Studio ALM evangelistMicrosoft MVPhttp://www.tech-fellow.lv | @tech_fellowGeta AS, Tech Fellow Consulting, Latvian .Net UGvaldis.iljuconoks@outlook.com

×