Your SlideShare is downloading. ×
Knockoutjs UG meeting presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Knockoutjs UG meeting presentation

925
views

Published on

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

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
925
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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