Building HTML and JavaScript Apps with KnockoutJS and MVVM
DEV361
Slide 2
Slide 3
UI Patterns Data & Bindings Data & Bindings Separation
of Concerns Separation of Concerns Structured JavaScript Structured
JavaScript
Slide 4
6+ 2+ Separates behavior and structure Declarative bindings
Observables
Slide 5
Knockout in 3 Steps Declarative Binding var myViewModel = {
firstName: ko.observable("John") }; ko.applyBindings(myViewModel);
Create an Observable Bind the ViewModel to the View
http://jsfiddle.net/johnpapa/BEzJc/
Slide 6
Slide 7
Manual Push via jQuery Guitar model: Sales price: var product =
{ id: 1001, model: "Taylor 314ce", salePrice: 1199.95 };
$("#guitarModel").val(product.model);
$("#guitarSalesPrice").val(product.salePrice); Source object Push
from Source to Target
Working with observableArray var myViewModel = { salesPerson:
ko.observable("John"), empNum: ko.observable(39811), products:
ko.observableArray([ { model: "Taylor 314CE", price: 1749, id=321
}, { model: "Martin D40", price: 1899, id=479 } ]) };
Pre-populating Operating on observableArray
Slide 20
demo ObservableArray
Slide 21
Slide 22 Built into Knockout Binding for element attributes
Multiple binding expressions">
Built In Bindings Built into Knockout Binding for element
attributes Multiple binding expressions
Slide 23
attrcheckedclickcssdisableenableevent hasfocus htmloptions
optionsTextoptionsValue
selectedOptionsstylesubmittextuniqueNamevalue visible text value
click disable enable attr Display and state bindings Text and value
bindings Bindings for specific attributes visible event Event
bindings
Slide 24
demo Built In Bindings
Slide 25
Slide 26
If truthy condition if If falsy condition ifnot Execute for
each item in a list foreach Shortcut to execute for the object
with
Slide 27
Control of Flow with a Template Pass the context for the
template with foreach...
Slide 28 Total value: Any truthy expression"> Total value:
Any truthy expression"> Total value: Any truthy expression"
title="Conditionals 0"> Total value: Any truthy
expression">
Conditionals 0"> Total value: Any truthy expression
Slide 29
Changing Context
Slide 30
demo Control of Flow and Templates
Slide 31
All Part of the Native Template Engine in Knockout All Part of
the Native Template Engine in Knockout
Slide 32
demo Templates
Slide 33
With and Without Knockout Observable Computed ObservableArray
Built In Bindings Templates Custom Binding Handlers
Slide 34
Slide 35
Creating a Binding Handler ko.bindingHandlers.fadeVisible = {
init: function(element, valueAccessor) { //... }, update:
function(element, valueAccessor) { //... } Runs first time the
binding is evaluated Runs after init and every time one of its
observables changes
Slide 36
Common Parameters ko.bindingHandlers.fadeVisible = { init:
function(element, valueAccessor, allBindingsAccessor, viewModel) {
var shouldDisplay = valueAccessor();
$(element).toggle(shouldDisplay); }, update: function(element,
valueAccessor, allBindingsAccessor, viewModel) { var shouldDisplay
= valueAccessor(); shouldDisplay ? $(element).fadeIn() :
$(element).fadeOut(); } Bound DOM element What is passed to the
binding All other bindings on same element The viewmodel
Slide 37
demo Custom Binding Handlers
Slide 38
Slide 39
JavaScript: The Developer Experience (DEV308) Find Me Later At
@john_papa JavaScript: The Language (DEV307)
Slide 40
Visual Studio Home Page ::
http://www.microsoft.com/visualstudio/en-ushttp://www.microsoft.com/visualstudio/en-us
Jason Zanders Blog ::
http://blogs.msdn.com/b/jasonz/http://blogs.msdn.com/b/jasonz/
Facebook ::
http://www.facebook.com/visualstudiohttp://www.facebook.com/visualstudio
Twitter ::
http://twitter.com/#!/visualstudiohttp://twitter.com/#!/visualstudio
Somasegars Blog ::
http://blogs.msdn.com/b/somasegar/http://blogs.msdn.com/b/somasegar/
Slide 41
Connect. Share. Discuss. http://northamerica.msteched.com
Learning Microsoft Certification & Training Resources
www.microsoft.com/learning TechNet Resources for IT Professionals
http://microsoft.com/technet Resources for Developers
http://microsoft.com/msdn
Slide 42
Required Slide Complete an evaluation on CommNet and enter to
win!
Slide 43
Scan the Tag to evaluate this session now on myTechEd
Mobile
