MsNetwork2013 Easy transition to HTML 5 using MVVM

Laka tranzicija na HTML5
koristeći MVVM
Radenko Zec, Lanaco
Miroslav Popović, Abacus

Opet tranzicija?
pa dokle više…

MVVM
• John Gossman, Microsoft, 2005.
• WPF, Silverlight - mnoštvo biblioteka

Knockout.js
6+ 2+
Razdvaja poslovnu logiku i UI
Declarative bindings
Observables

Knockout u 3 koraka
<input data-bind="value: firstName" />
var viewModel = {
firstName: ko.observable("Radenko")
};
ko.applyBindings(viewModel);

Observable
• ko.observable();
• Dvosmjerni binding
• Ručno praćenje izmjena sa subscribe

Computed
• ko.computed();
• Observable čija vrijednost zavisi od drugih
property-a

ObservableArray
• ko.observableArray();
• Prate se izmjene niza (dodavanje i uklanjanje
elemenata)

Bindings
• data-bind="..." - HTML5 data atribut
<input type="text“
data-bind="enable: canEdit, value: price" />
<select data-bind="options: colors,
value: selectedColor,
optionsText: 'name',
optionsValue: 'key'"></select>
<button data-bind="click: save">OK</button>

Knockout bindings
attr checked click css disable enable
event foreach hasfocus html if ifnot
options optionsText optionsValue selectedOptions style submit
template text uniqueName value visible with

Tok – Control flow
• foreach, if, ifnot, with
<ul data-bind="foreach: items">
<li>Price:
<span data-bind="text: price"></span>
</li>
<ul>

Tok - Containerless Syntax
<ul>

<li>Price:
<span data-bind="text: price"></span>
</li>

<ul>

Templates
• Ugrađeni template engine – foreach, if, with…
• template binding (native, jQuery.tmpl)
<div data-bind="template:
{ name: 'personTemplate', data: buyer }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits:
<span data-bind="text: credits"></span>
</p>
</script>

Custom Bindings
ko.bindingHandlers.myBinding = {
init: function (
element, valueAccessor, allAccessor) {
// Poziva se pri prvoj primjeni na element
// Postavljanje početnog stanja, event handlera, itd.
},
update: function (
element, valueAccessor, allAccessor) {
// Prvi put i pri svakoj izmjeni observable vrijednosti
// Izmjeniti DOM element ovdje...
}
};
<div data-bind="myBinding: value"></div>

Extending Observables
• ko.extenders
• Primjer: Knockout-Validation
firstName: ko.observable().extend({ required: true });
email: ko.observable().extend({ email: true });
username: ko.observable().extend({ pattern: '^[a-z0-9]+$' });

JSON
• ko.toJS, ko.toJSON
• ajax pozivi
$.ajax({ url: '...', data: ko.toJS(this) });
• debugging
data-bind="text: ko.toJSON($root)"

Podaci sa servera
• var serverModel =
@Html.Raw(Json.Encode(Model));
• ASP.NET MVC (Pascal case)
=> JavaScript (Camel case)
• Json.NET, ServiceStack.JsonSerializer

Praćenje promjena
this.dirtyFlag = new ko.dirtyFlag(this);
<button data-bind=“
click: save, enable: dirtyFlag.isDirty()">
Save
</button>

Update / Revert / Commit pattern
var VM = function (data) {
this.name = ko.observable();
this.cache = function () { };
this.update(data);
};
ko.utils.extend(VM.prototype, {
update: function (data) {
this.name(data.name || '- new -');
this.cache.latestData = data;
},
revert: function () { this.update(this.cache.latestData); },
commit: function () { this.cache.latestData = ko.toJS(this);}
});

Za kraj…
• http://knockoutjs.com/
• http://knockmeout.net/
• ... za nastavak
Durandal - http://durandaljs.com/

MsNetwork2013 Easy transition to HTML 5 using MVVM

More Related Content

More from Radenko Zec (8)

MsNetwork2013 Easy transition to HTML 5 using MVVM