Knockoutjs UG meeting presentation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Knockoutjs UG meeting presentation

on

  • 1,314 views

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

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

Statistics

Views

Total Views
1,314
Views on SlideShare
1,302
Embed Views
12

Actions

Likes
0
Downloads
33
Comments
0

5 Embeds 12

http://www.tech-fellow.lv 7
http://tech-fellow.azurewebsites.net 2
http://www.linkedin.com 1
http://www.tech-fellow.net 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Knockoutjs UG meeting presentation Presentation Transcript

  • 1. www.dotnet.lv
  • 2. Valdis IljuconoksSoftware ArchitectMicrosoft MVPGeta Latvia, Viiar Consultingvaldis.iljuconoks@dotnet.lvhttp://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 UtilitiesData features Plug-ins
  • 7. Observables
  • 8. Observable Observable ArrayDependent Observables (Computed)
  • 9. // read valuevar val = viewmodel.name();// set valueviewmodel.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 UtilitiesData features Plug-ins
  • 14. Bindings
  • 15. Built-in BindingsCustom 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 UtilitiesData 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 UtilitiesData features Plug-ins
  • 30. Data features
  • 31. ko.toJS()ko.toJSON()
  • 32. Observables Bindings UtilitiesData features Plug-ins
  • 33. Plug-ins
  • 34. ko.mapping.*
  • 35. Observables Bindings UtilitiesData features Plug-ins
  • 36. Resources
  • 37. knockoutjs.com blog.stevensanderson.com knockmeout.comstackoverflow.com -> “knockoutjs”groups.google.com -> “knockoutjs”
  • 38. must have to build interactive UI
  • 39. ?
  • 40. Valdis IljuconoksSoftware ArchitectMicrosoft MVPGeta Latvia, Viiar Consultingvaldis.iljuconoks@dotnet.lvhttp://dotnet.lv/blogs/vi
  • 41. www.dotnet.lv