Client side development with knockout.js
Upcoming SlideShare
Loading in...5
×
 

Client side development with knockout.js

on

  • 737 views

 

Statistics

Views

Total Views
737
Views on SlideShare
737
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

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

Client side development with knockout.js Client side development with knockout.js Presentation Transcript

  • 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
  • knockout.js
  • $(function () {$("#btn").click(function () {$.getJSON("/api/customers").then(function (customers) {$.each(customers, function () {$("<li>").text(this.FirstName + " " +this.LastName).appendTo("#customers");});});});});
  • $(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>
  • ObservablesBindingsUtilitiesData featuresPlug-ins
  • Observables
  • ObservableObservable ArrayDependent Observables (Computed)
  • ObservablesFunctions (not all browsers support getters and setters)// read valuevar val = viewmodel.name();// set valueviewmodel.name(“Valdis”)
  • Observable ArrayUse with collectionsDetect changes only within an arrayUse knockout array methods (cross-browser)viewmodel.customers = ko.obserableArray();viewmodel.customers.push(new customer());
  • indexOf(item)slice(2, 4)push(item)pop()unshift(item)shift()reverse()sort()remove(item)removeAll()
  • Dependent Observables (Computed)“this” keyword has to be managedviewmodel.fullname = ko.computed(function() {return this.name() + “ ” + this.surname();})
  • ObservablesBindingsUtilitiesData featuresPlug-ins
  • Bindings
  • Built-in BindingsControl-flow bindingsCustom bindings
  • Built-in BindingsControl-flow bindingsCustom bindings
  • data-bind=“”value:html:text:css:style:visible:template:…
  • Built-in BindingsControl-flow bindingsCustom bindings
  • data-bind=“”foreach:if:ifnot:with:…
  • Built-in BindingsControl-flow bindingsCustom bindings(most powerful extension point)
  • Event binding
  • addOnEnter: function(model, event) {var keycode = (event.which ? event.which :event.keyCode);if (keycode === 13) {viewModel.addTCustomer();}return true;}data-bind=“event: {keypress: addOnEnter}”
  • Custom binding
  • Custom bindingsDefine your own behaviorko.bindingHandlers.yourBindingName = {init:update:}
  • 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”
  • ObservablesBindingsUtilitiesData featuresPlug-ins
  • Utilities
  • ko.utils.arrayFilter()
  • ko.utils.arrayFilter()ko.utils.arrayFirst()ko.utils.arrayForEach()ko.utils.arrayIndexOf()ko.utils.arrayMap()ko.utils.compareArrays()ko.utils.unwrapObservable()…
  • ObservablesBindingsUtilitiesData featuresPlug-ins
  • Data features
  • ko.toJS()ko.toJSON()
  • ObservablesBindingsUtilitiesData featuresPlug-ins
  • Plug-ins
  • ko.mapping.*
  • ObservablesBindingsUtilitiesData featuresPlug-ins
  • Resources
  • knockoutjs.comblog.stevensanderson.comknockmeout.comstackoverflow.com -> “knockoutjs”groups.google.com -> “knockoutjs”
  • nice to haveto build interactive UI
  • ?
  • 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