Building HTML and JavaScript Apps with KnockoutJS and MVVM DEV361

UI Patterns Data & Bindings Data & Bindings Separation of Concerns Separation of Concerns Structured JavaScript Structured JavaScript

6+ 2+ Separates behavior and structure Declarative bindings Observables

Knockout in 3 Steps Declarative Binding var myViewModel = { firstName: ko.observable("John") }; ko.applyBindings(myViewModel); Create an Observable Bind the ViewModel to the View

Manual Push via jQuery Guitar model: Sales price: var product = { id: 1001, model: "Taylor 314ce", salePrice: }; $("#guitarModel").val(product.model); $("#guitarSalesPrice").val(product.salePrice); Source object Push from Source to Target

demo With and Without Knockout

Taylor 110 Taylor 914ce Taylor 110

2 Way Binding Guitar model: Sales price: Declarative Binding product: { id: 1001, model: ko.observable("Taylor 314ce"), salePrice: ko.observable( ) } ko.applyBindings(data); Source object Bind Source to Target, & Vice Versa

demo Observables

Defining a Computed vm = { id: ko.observable(1), salePrice: ko.observable(4199), qty: ko.observable(2) }; vm.extendedPrice = ko.computed(function () { return this.product() ? this.salePrice() * parseInt("0" + this.qty(), 10) : 0; }, vm); observables owner

demo Computed

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

demo ObservableArray

Built In Bindings <input type="text" data-bind="enable: allowEditing, value:salePrice" /> <select data-bind="options: colors, value: selectedColor, optionsText: 'name', optionsValue: 'key'" > Built into Knockout Binding for element attributes Multiple binding expressions

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

demo Built In Bindings

If truthy condition if If falsy condition ifnot Execute for each item in a list foreach Shortcut to execute for the object with

Control of Flow with a Template Pass the context for the template with “foreach”...

Conditionals 0"> Total value: Any “truthy” expression

Changing Context

demo Control of Flow and Templates

All Part of the Native Template Engine in Knockout All Part of the Native Template Engine in Knockout

demo Templates

With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates Custom Binding Handlers

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

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

demo Custom Binding Handlers

JavaScript: The Developer Experience (DEV308) Find Me Later JavaScript: The Language (DEV307)

Visual Studio Home Page :: Jason Zander’s Blog :: Facebook :: Twitter :: Somasegar’s Blog ::

Connect. Share. Discuss. Learning Microsoft Certification & Training Resources TechNet Resources for IT Professionals Resources for Developers

Required Slide Complete an evaluation on CommNet and enter to win!

Scan the Tag to evaluate this session now on myTechEd Mobile