knockout.js with asp.net web api
TRANSCRIPT
Knockout.jsKnockout.jsHands on introduction
Ioan AntoniuDecember 10, 2013
What is Knockout.js?What is Knockout.js?• Javascript MVVM library
• Declarative data binding
• TemplatingTemplating• Automatic UI refresh• Dependency tracking• Extensible
Bottom Line UpfrontBottom Line Upfront• What is KnockoutWhat is KnockoutMVVM framework for JavascriptMVVM framework for Javascript
Observable View ModelsObservable View Models
Declarative and Templated ViewsDeclarative and Templated Views
Enables simpler, reusable, frontend and cleaner communication with backendEnables simpler, reusable, frontend and cleaner communication with backend
• GoalGoalScratch the surface of knockoutScratch the surface of knockout
Consists of three parts
Model: Defines the datastructure
ViewModel: Adapts the model for presentation
View: Presents the data in the UI
MVVM Pattern
Model serialized as HTML
Model serialized as Form / Query string
Dictionary
Must know how model
was serialized
Interface is now
consistently JSON
Javascript is now
responsible for
presenting JSON and communicating JSON back to server
Server Model JSON ModelView Model
View
MVVMMVVM
Declarative BindingsUses 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
Working with Observable ArraysKnockout provides helper functions
push, pop, remove, removeAll, unshift, shift, reverse, sort, indexOf, splice, slice
Supports native JavaScript Array functions
myObservableArray.push(1); indexof, remove
The View ModelThe View Model consists of observable properties, variables and/or functions
var viewModel = {
<property> : <observableType>,
…
<property> : <variable>,
<property> : <function>
}
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
ExtensiblePossible to create your own bindings
Possible to change the templating engine
How to create an application?
1. Import neccessary scripts2. Define a model3. Define a viewmodel4. Apply bindings
DemoDemo• PrototypePrototype• Baby stepsBaby stepsObservableObservable
View modelView model
ModelModel
ArrayArray
• Ugh, where’s the View (look at prototype)Ugh, where’s the View (look at prototype)ViewView
View ArrayView Array ( (clean upclean up entry should be ViewModel) entry should be ViewModel)
Its all connectedIts all connected
Computed (Computed ( simplesimple))
More bindings (More bindings ( csscss, , if and valueif and value , , value optionsvalue options, , clickclick, , eventevent, , more clickmore click))
• ActionsActionsRoot ViewModel (Root ViewModel ( with / rootwith / root ))
Strategy for dealing with server (Strategy for dealing with server ( getget ))
• ASP.NETASP.NETJSONJSON
WEB APIWEB API
BundlesBundles
Questions?
Give me feedback so I can get better
Write me to [email protected] for the demo app and resources for this presentation, other questions etc...
ResourcesResources• Will post slides / codeWill post slides / code• http://jsfiddle.net/http://jsfiddle.net/Decompose a problem using this sandbox Decompose a problem using this sandbox
• http://knockoutjs.com/http://knockoutjs.com/Interactive tutorials – experience themInteractive tutorials – experience them
• http://www.knockmeout.net/http://www.knockmeout.net/Tons of experience captured in this blogTons of experience captured in this blog
• http://channel9.msdn.com/Events/MIX/http://channel9.msdn.com/Events/MIX/MIX11/FRM08MIX11/FRM08
Great video from early days of KnockoutGreat video from early days of Knockout
• http://channel9.msdn.com/Events/Techhttp://channel9.msdn.com/Events/TechDays/TechDays-2012-Belgium/199Days/TechDays-2012-Belgium/199
Recent video of Knockout + Web Api + Upshot = Amazing!Recent video of Knockout + Web Api + Upshot = Amazing!