Knockoutjs UG meeting presentation

Valdis Iljuconoks
Software Architect
Microsoft MVP

Geta Latvia, Viiar Consulting
valdis.iljuconoks@dotnet.lv
http://dotnet.lv/blogs/vi

$(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>

Observables
Bindings
Utilities
Data features
Plug-ins

Observable
Observable Array
Dependent Observables (Computed)

// read value
var val = viewmodel.name();

// set value
viewmodel.name(“Valdis”)

Observables
Functions (not all browsers support getters and setters)

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)

indexOf(item)
slice(2, 4)
push(item)
pop()
unshift(item)
shift()
reverse()
sort()
remove(item)
removeAll()

viewmodel.fullname = ko.computed(function() {
return this.name() + “ ” + this.surname();
})

Dependent Observables (Computed)
“this” keyword has to be managed

Built-in Bindings
Custom bindings

data-bind=“”

value:
html:
text:
css:
style:
visible:
template:
…

data-bind=“”

foreach:
if:
ifnot:
with:
…

Custom bindings
(most powerful extension point)

addOnEnter: function(model, event) {
var keycode = (event.which ? event.which :
event.keyCode);
if (keycode === 13) {
viewModel.addTCustomer();
}

return true;
}

data-bind=“event: {keypress: addOnEnter}”

ko.bindingHandlers.yourBindingName = {
init:
update:
}

Custom bindings
Define your own behavior

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”

ko.utils.arrayFilter()
ko.utils.arrayFirst()
ko.utils.arrayForEach()
ko.utils.arrayIndexOf()
ko.utils.arrayMap()
ko.utils.compareArrays()
ko.utils.unwrapObservable()
…

knockoutjs.com
blog.stevensanderson.com
knockmeout.com
stackoverflow.com -> “knockoutjs”
groups.google.com -> “knockoutjs”

must have to build interactive UI

Knockoutjs UG meeting presentation

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Knockoutjs UG meeting presentation (20)

Recently uploaded (20)

Knockoutjs UG meeting presentation