Introduction to Knockoutjs
-
Upload
jhoguet -
Category
Technology
-
view
2.778 -
download
0
description
Transcript of Introduction to Knockoutjs
![Page 1: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/1.jpg)
Knockout.jsJon Hoguet, MyWebGrocer
March 12, 2012
![Page 2: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/2.jpg)
Jon Who?
![Page 3: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/3.jpg)
Bottom Line Upfront• What is Knockout
o MVVM framework for Javascript• Observable View Models• Declarative and Templated Views• Enables simpler, reusable, frontend and cleaner communication
with backend
• Geek or Presenter (definitely Geek)o Slow me downo Ask questionso Give me feedback so I can get better
• Goalo Scratch the surface of knockout
![Page 4: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/4.jpg)
Model serialized as
HTML
Model serialized as Form / Query
string Dictionary
Must know how model was serialized
![Page 5: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/5.jpg)
Model serialized as
HTML
Model serialized as Form / Query
string Dictionary
Must know how model was serialized
• But we’ve always done it that way – why not…• Complex communication interface (send one thing and
receive another)• Model Binding against a dictionary seems simple but
quickly gets complex (object graphs, arrays)• View is now server side (Razor, C#) AND client side
(javascript, css) creating coupling between these layers• View ultimately ‘lives’ in the DOM not in CLR / Razor• Client side code is coupled to the view and not the model
• Difficult to reuse code in mobile, etc.
![Page 6: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/6.jpg)
Interface is now consistently
JSON
Javascript is now responsible for presenting
JSON and communicating JSON back to
server
![Page 7: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/7.jpg)
Interface is now consistently
JSON
Javascript is now responsible for presenting
JSON and communicating JSON back to
server
• Much cleaner communication interface• Can write multiple presentation layers (ie. mobile) on top of the
same communication interface• Model binding is radically easier (Json Model Binder)
![Page 8: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/8.jpg)
MV-WHAT…
![Page 9: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/9.jpg)
Server ModelJSON Model
View Model
View
MVVM
![Page 10: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/10.jpg)
Demo• Prototype• Baby steps
o Observableo View modelo Modelo Array
• Ugh, where’s the View (look at prototype)o Viewo View Array (clean up entry should be ViewModel)o Its all connectedo Templates (edit / view, table / list) (before / after / cleanup)o Computed (simple, prototype)o More bindings (css, if and value, value options, click, event, more click)
• Actionso Root ViewModel (with / root)o Strategy for dealing with server (get)
• Binding Handlerso Editableo If view code is bleeding into your view model – its time for a binding handler
• Ie – animations,
• ASP.NETo JSONo WEB APIo Bundles
![Page 11: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/11.jpg)
Gotchas• Dates –
o http://feedproxy.google.com/~r/ScottHanselman/~3/MTbztRtN2l8/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx Mapping
• Don’t self close tags – unless there will never be anything inside that tag – its tempting…
• Careful that you don’t ‘un-observe’ an item by not setting properly
• Be mindful of whether it is observable or not
• Template is a string….
• Misleading errors
![Page 12: Introduction to Knockoutjs](https://reader033.fdocuments.us/reader033/viewer/2022051209/547ca9d45806b5fe3f8b47da/html5/thumbnails/12.jpg)
Resources• Will post slides / code• http://jsfiddle.net/
o Decompose a problem using this sandbox
• http://knockoutjs.com/o Interactive tutorials – experience them
• http://www.knockmeout.net/o Tons of experience captured in this blog
• http://channel9.msdn.com/Events/MIX/MIX11/FRM08o Great video from early days of Knockout
• http://channel9.msdn.com/Events/TechDays/TechDays-2012-Belgium/199o Recent video of Knockout + Web Api + Upshot = Amazing!