Client side development with knockout.js

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();})

Bindings

Built-in BindingsControl-flow bindings

Custom bindings

data-bind=“”

value:html:text:css:

style:visible:

template:…


Custom bindings

data-bind=“”

foreach:if:

ifnot:with:

…


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”

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()…

Data features

ko.toJS()ko.toJSON()

Plug-ins

ko.mapping.*

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]

Client side development with knockout.js

Technology

Transcript of Client side development with knockout.js