Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Laka tranzicija na HTML5
koristeći MVVM
Radenko Zec, Lanaco
Miroslav Popović, Abacus
Opet tranzicija?
pa dokle više…
Zašto?
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.app...
DEMO
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 da...
Knockout bindings
attr checked click css disable enable
event foreach hasfocus html if ifnot
options optionsText optionsVa...
Tok – Control flow
• foreach, if, ifnot, with
<ul data-bind="foreach: items">
<li>Price:
<span data-bind="text: price"></s...
Tok - Containerless Syntax
<ul>
<!-- ko foreach: items -->
<li>Price:
<span data-bind="text: price"></span>
</li>
<!-- /ko...
Templates
• Ugrađeni template engine – foreach, if, with…
• template binding (native, jQuery.tmpl)
<div data-bind="templat...
DEMO
Proširivost
Custom Bindings
ko.bindingHandlers.myBinding = {
init: function (
element, valueAccessor, allAccessor) {
// Poziva se pri ...
DEMO
Extending Observables
• ko.extenders
• Primjer: Knockout-Validation
firstName: ko.observable().extend({ required: true });...
JSON
• ko.toJS, ko.toJSON
• ajax pozivi
$.ajax({ url: '...', data: ko.toJS(this) });
• debugging
data-bind="text: ko.toJSO...
Podaci sa servera
• var serverModel =
@Html.Raw(Json.Encode(Model));
• ASP.NET MVC (Pascal case)
=> JavaScript (Camel case...
Praćenje promjena
this.dirtyFlag = new ko.dirtyFlag(this);
<button data-bind=“
click: save, enable: dirtyFlag.isDirty()">
...
Update / Revert / Commit pattern
var VM = function (data) {
this.name = ko.observable();
this.cache = function () { };
thi...
Za kraj…
• http://knockoutjs.com/
• http://knockmeout.net/
• ... za nastavak
Durandal - http://durandaljs.com/
MsNetwork2013 Easy transition to HTML 5 using MVVM
MsNetwork2013 Easy transition to HTML 5 using MVVM
MsNetwork2013 Easy transition to HTML 5 using MVVM
MsNetwork2013 Easy transition to HTML 5 using MVVM
MsNetwork2013 Easy transition to HTML 5 using MVVM
MsNetwork2013 Easy transition to HTML 5 using MVVM
MsNetwork2013 Easy transition to HTML 5 using MVVM
Upcoming SlideShare
Loading in …5
×

MsNetwork2013 Easy transition to HTML 5 using MVVM

679 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

MsNetwork2013 Easy transition to HTML 5 using MVVM

  1. 1. Laka tranzicija na HTML5 koristeći MVVM Radenko Zec, Lanaco Miroslav Popović, Abacus
  2. 2. Opet tranzicija? pa dokle više…
  3. 3. Zašto?
  4. 4. MVVM • John Gossman, Microsoft, 2005. • WPF, Silverlight - mnoštvo biblioteka
  5. 5. Knockout.js 6+ 2+ Razdvaja poslovnu logiku i UI Declarative bindings Observables
  6. 6. Knockout u 3 koraka <input data-bind="value: firstName" /> var viewModel = { firstName: ko.observable("Radenko") }; ko.applyBindings(viewModel);
  7. 7. DEMO
  8. 8. Observable • ko.observable(); • Dvosmjerni binding • Ručno praćenje izmjena sa subscribe
  9. 9. Computed • ko.computed(); • Observable čija vrijednost zavisi od drugih property-a
  10. 10. ObservableArray • ko.observableArray(); • Prate se izmjene niza (dodavanje i uklanjanje elemenata)
  11. 11. 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>
  12. 12. 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
  13. 13. Tok – Control flow • foreach, if, ifnot, with <ul data-bind="foreach: items"> <li>Price: <span data-bind="text: price"></span> </li> <ul>
  14. 14. Tok - Containerless Syntax <ul> <!-- ko foreach: items --> <li>Price: <span data-bind="text: price"></span> </li> <!-- /ko --> <ul>
  15. 15. 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>
  16. 16. DEMO
  17. 17. Proširivost
  18. 18. 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>
  19. 19. DEMO
  20. 20. 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]+$' });
  21. 21. JSON • ko.toJS, ko.toJSON • ajax pozivi $.ajax({ url: '...', data: ko.toJS(this) }); • debugging data-bind="text: ko.toJSON($root)"
  22. 22. Podaci sa servera • var serverModel = @Html.Raw(Json.Encode(Model)); • ASP.NET MVC (Pascal case) => JavaScript (Camel case) • Json.NET, ServiceStack.JsonSerializer
  23. 23. Praćenje promjena this.dirtyFlag = new ko.dirtyFlag(this); <button data-bind=“ click: save, enable: dirtyFlag.isDirty()"> Save </button>
  24. 24. 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);} });
  25. 25. Za kraj… • http://knockoutjs.com/ • http://knockmeout.net/ • ... za nastavak Durandal - http://durandaljs.com/

×