Knockout.js with ASP.Net Web API

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 Consistsof 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 JSONModel View Model View MMVVVVMM
• 12.
  Declarative Bindings Usesdata-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 ObservableArrays 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 jQueryTemplate 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 tocreate your own bindings Possible to change the templating engine
• 17.
  How to createan 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 mefeedback 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 • WWiillllppoosstt 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!!