Your SlideShare is downloading. ×
0
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MsNetwork2013 Easy transition to HTML 5 using MVVM

283

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
283
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×