client side development with knockout.js
DESCRIPTION
TRANSCRIPT
Valdis Iljuconoks
Technical Fellow, Software ArchitectVisual Studio ALM evangelistMicrosoft MVP
http://www.tech-fellow.lv | @tech_fellow
Geta AS, Tech Fellow Consulting, Latvian .Net [email protected]
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>
ObservablesBindingsUtilities
Data featuresPlug-ins
Observables
ObservableObservable Array
Dependent Observables (Computed)
ObservablesFunctions (not all browsers support getters and setters)
// read valuevar val = viewmodel.name();
// set valueviewmodel.name(“Valdis”)
Observable ArrayUse with collections
Detect 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 managed
viewmodel.fullname = ko.computed(function() { return this.name() + “ ” + this.surname();})
ObservablesBindingsUtilities
Data featuresPlug-ins
Bindings
Built-in BindingsControl-flow bindings
Custom bindings
Built-in BindingsControl-flow bindings
Custom bindings
data-bind=“”
value:html:text:css:
style:visible:
template:…
Built-in BindingsControl-flow bindings
Custom bindings
data-bind=“”
foreach:if:
ifnot:with:
…
Built-in BindingsControl-flow bindings
Custom 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 behavior
ko.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”
ObservablesBindingsUtilities
Data 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()…
ObservablesBindingsUtilities
Data featuresPlug-ins
Data features
ko.toJS()ko.toJSON()
ObservablesBindingsUtilities
Data featuresPlug-ins
Plug-ins
ko.mapping.*
ObservablesBindingsUtilities
Data featuresPlug-ins
Resources
knockoutjs.comblog.stevensanderson.com
knockmeout.comstackoverflow.com -> “knockoutjs”groups.google.com -> “knockoutjs”
nice to haveto build interactive UI
?
Valdis Iljuconoks
Technical Fellow, Software ArchitectVisual Studio ALM evangelistMicrosoft MVP
http://www.tech-fellow.lv | @tech_fellow
Geta AS, Tech Fellow Consulting, Latvian .Net [email protected]