knockout.js with asp.net web api

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 iantoniu@pentalog.fr 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!