Introduction to Knockoutjs

Knockout.jsJon Hoguet, MyWebGrocer

March 12, 2012

Jon Who?

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

Model serialized as

HTML

Model serialized as Form / Query

string Dictionary

Must know how model was serialized

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.

Interface is now consistently

JSON

Javascript is now responsible for presenting

JSON and communicating JSON back to

server

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)

MV-WHAT…

Server ModelJSON Model

View Model

View

MVVM

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

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

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!