Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client side development with knockout.js

872 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×