Knockout.js with ASP.Net Web API
Download as PPS, PDF0 likes569 views
Knockout.js is a JavaScript MVVM library that provides declarative data binding and automatic UI refresh. It consists of a Model that defines the data structure, a ViewModel that adapts the model for presentation, and a View that presents the data. Knockout uses data-binding attributes to bind the View to the ViewModel and supports templating, computed values, and extensibility through custom bindings.
Knockout.js with ASP.Net Web API
- 1. KKnnoocckkoouutt ..jj ss Hands on introduction Ioan Antoniu December 10, 2013
- 2. WWhhaatt iiss KKnnoocckkoouutt..jjss?? • Javascript MVVM library • Declarative data binding • TTeemmppllaattiinngg • Automatic UI refresh • Dependency tracking • Extensible
- 3. BBoottttoomm LLiinnee UUppffrroonntt • WWhhaatt iiss KKnnoocckkoouutt MMVVVVMM f rfarammeewwoorkr kf ofor rJ Jaavavasscrcirpiptt OObbseservrvaabblle eV Vieieww M Mooddeelsls DDeeclcalararatitvieve a anndd T Temempplalatetded V Vieiewwss EEnnabableless s simimppleler,r ,r ereuusasabblele, ,f rforonntetenndd a anndd c lceleaanneer rc coommmmuunnicicaatitoionn w witihth b baackckeenndd • GGooaall SSccrartacthch t hthe es suurfrafacece o of fk knnoocckokouutt
- 4. MVVM Pattern Consists of three parts Model: Defines the datastructure ViewModel: Adapts the model for presentation View: Presents the data in the UI
- 9. Model serialized as HTML Model serialized as Form / Query string Dictionary Must know how model was serialized
- 10. Interface is now consistently JSON Javascript is now responsible for presenting JSON and communicati ng JSON back to server
- 11. Server Model JSON Model View Model View MMVVVVMM
- 12. Declarative Bindings Uses data-binding attribute to bind to model Bindings for presentational use: visible, text, html, css, style, attr, template Bindings for user interface elements click, event, submit, enable, disable, value, checked, options, selectionOptions, uniqueName
- 13. Working with Observable Arrays Knockout provides helper functions push, pop, remove, removeAll, unshift, shift, reverse, sort, indexOf, splice, slice Supports native JavaScript Array functions myObservableArray.push(1); indexof , r emove
- 14. The View Model The View Model consists of observable properties, variables and/or functions var viewModel = { <property> : <observableType>, … <property> : <variable>, <property> : <function> }
- 15. Templating Uses jQuery Template syntax Has shorthands for more efficient rendering foreach Define templates in script tags with type = text/html id = the name of the template
- 16. Extensible Possible to create your own bindings Possible to change the templating engine
- 17. How to create an application? 1. Import neccessary scripts 2. Define a model 3. Define a viewmodel 4. Apply bindings
- 18. DDeemmoo • PPrroottoottyyppee • BBaabbyy sstteeppss OObbsseerrvvaabbllee VViieeww mmooddeell MMooddeell AArrrraayy • UUgghh,, wwhheerree’’ss tthhee VViieeww ((llooookk aatt pprroottoottyyppee)) VViieeww VViieeww AArrrraayy ((cclleeaann uupp eennttrryy sshhoouulldd bbee VViieewwMMooddeell)) IIttss aallll ccoonnnneecctteedd CCoommppuutteedd ((ssiimmppllee))
- 19. Questions? Give me feedback so I can get better Write me to iantoniu@pentalog.fr for the demo app and resources for this presentation, other questions etc...
- 20. RReessoouurrcceess • WWiillll ppoosstt sslliiddeess // ccooddee • hhttttpp::////jjssffiiddddllee..nneett// DDeecocommppoossee a a p prorobblelemm u ussiningg t hthisis s asannddbbooxx • hhttttpp::////kknnoocckkoouuttjjss..ccoomm// InIntetrearacctitvivee t ututotoriraialsls – – e exxppeeririenencce et htheemm • hhttttpp::////wwwwww..kknnoocckkmmeeoouutt..nneett// TToonnss o of fe expxpeerireienncece c caapptutureredd i nin t hthisis b blologg • hhttttpp::////cchhaannnneell99..mmssddnn..ccoomm//EEvveennttss//MMIIXX// MMIIXX1111//FFRRMM008 GGreraeat tv vidideeoo f rforomm e eaarlryly d dayayss o of fK Knnoocckkoouutt • hhttttpp::////cchhaannnneell99..mmssddnn..ccoomm//EEvveennttss//TTeecchh DDaayyss//TTeecchhDDaayyss--22001122--BBeellggiiuumm//119999 RReececenntt v vidideeoo o of fK Knnoockckoouut t+ + W Webeb A Appi i+ + U Uppsshhoot t == A Ammaazizningg!!