MsNetwork2013 Easy transition to HTML 5 using MVVM

628 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
628
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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/

×