Implementing MVVM in JavaScript with KnockoutKnockout JS

Who am I?

• Andoni Arroyo

Development Advisor at Plain Concepts.

• Bloghttp://geeks.ms/blogs/aarroyo/

• Webhttp://www.andoniarroyo.com/

• Twitter@andoniarroyo

• LinkedInhttp://www.linkedin.com/in/andoniarroyo

Agenda• Why I need a pattern?• MVVM (Model View ViewModel) and The Benefits of MVVM• Knockout JS

• Connecting View Models to Views, Computed observables, Observable Arrays

• Control-Flow Bindings• Interactive Bindings• Accessing External Data• The template binding• Some common techniques…• Custom bindings

Why I need a pattern?

• Complexity • Rightsizing• Maintain your code• You are not alone! (diferents profiles)• Testeability

• UX• Avoiding roundtrips• SPA (Web, mobile)

Ok, we need a plan…

• A pattern is a plan!• All the profiles know where set and get the elements.• Take in mind Project requeriments.

MVVM (Model View ViewModel)

• Architectural pattern • Based on MVC and MVP• Separate:• User-interfaces (UI).• Behavior of the application.

(State and workflow).• Business logic.

Model

• Implementation of the application's domain model.• Data model along with business and validation logic. • Repositories, business objects, data transfer objects (DTOs), Plain Old CLR

Objects (POCOs), and generated entity and proxy objects.

View

• Visual representation of that data

Structure, layout, and appearance of what the user sees on the screen. • Receives the user’s interaction.

View Model

• Intermediary between the view and the model, and is responsible for handling the view logic. • Provides data from the model in a form that the view can easily use.

• Provides implementations of commands that a user of the application initiates in the view.

• Defining logical state changes that affect some aspect of the display in the view.

The Benefits of MVVM

• Separation Separation of concerns• Developers and designers can work more independently and concurrently on

their components.• Decoupled pieces.

• Maintenible code (More testeable and easy to understand)

Knockout JS

• JavaScript library:

• Declarative BindingsEasily associate DOM elements with model data using a concise, readable syntax.• Automatic UI Refresh

When your data model's state changes, your UI updates automatically.• Dependency Tracking

Implicitly set up chains of relationships between model data, to transform and combine it.• Templating

Quickly generate sophisticated, nested UIs as a function of your model data.

Knockout JS (Some features)

• No dependencies• Browser support:

• Mozilla Firefox 2.0+ (latest version tested = 3.6.8)• Google Chrome (tested on version 5 for Windows and Mac; should work on older

versions too)• Microsoft Internet Explorer 6, 7, 8, 9, 10• Apple Safari (tested on Windows Safari version 5, Mac OS X Safari version 3.1.2, and

iPhone Safari for iOS 4; should work on newer/older versions too).• Opera 10 for Windows.

• Don’t recheck these for every release:• Opera Mini• Google Android OS browser (OS version 2.2)

Connecting Views to View Models

• Observables JavaScript variables but let Knockout observe their changes and automatically update the relevant parts of the view.• Bindings (data-bind)

Connect a user interface component in the view to a particular observable, you have to bind an HTML element to it.

• ko.applyBindingsCreate a relation between the View and the source object.

Demo

• Demo 1 - Connecting Views to View Models

Computed observables

• Properties that are dynamically generated.

Let combine several normal observables into a single property, and Knockout will still keep the view up-to-date whenever any of the underlying values change.

Demo

• Demo 2 - Computed observables

Observable Arrays• Let track lists of items.• Implementation of the common methods:

push() pop() unshift()shift() slice() remove()removeAll() destroy() destroyAll()sort() reversed() indexOf()

Control-Flow Bindings

• The foreach binding

Iterates through the array and uses each item it finds for the binding context of the contained markup.

• Binding context ($root, $data, $index, $parent)

• Events (afterRender, afterAdd, beforeRemove, beforeMove, afterMove)

Control-Flow Bindings II

• if and ifnotIf the parameter you pass evaluates to true, the contained HTML will be displayed, otherwise it’s removed from the DOM.

• withUsed to manually declare the scope of a particular block.

Demo

• Demo 3 - Control-Flow Bindings

Interactive Bindings

• click: <method>Call a ViewModel method when the element is clicked.• value: <property>

Link a form element’s value to a ViewModel property.• enable: <property>/ disable: <property>

Enable/Disabled an element based on a certain condition.• checked: <property>

Link a radio button or check box to a ViewModel property.

Interactive Bindings II• options: <array>

Define a <select> element with a ViewModel array.• selectedOptions: <array>

Define the active elements in a <select> field.• event: <object>

Call a method when a user-initiated event occurs.• submit: <method>

Call a method when a form is submitted.• hasfocus: <property>

Define whether or not the element is focused

Demo

• Demo 4 - Interactive Bindings

Accessing External Data

• Load ViewModel from JSONko.mapping.fromJS

• Converting View Model Data to Plain JSONko.mapping.toJS

• knockout.mapping plugin

Demo

• Demo 5 - Accessing External Data

The template binding

• Out of the box “inline”

• External templates• Knockout.js External Template Engine• https://github.com/ifandelse/Knockout.js-External-Template-Engine

(nuget)• https://nuget.org/packages/Knockout.js_External_Template_Engine

Demo

• Demo 6 - Templates

Some common techniques…

• Subscribe to observables.

• The "throttle" extender.• re-evaluation until its dependencies have stopped changing for a specified

period of time

Demo

• Demo 7 - Common techniques

Custom bindings

• The way to extend Knockout• ko.bindingHandlers

• initOnce for each DOM element that you use the binding on.• set any initial state• register any event handlers

• updateThe associated observable has changed

Demo

• Demo 7 – Creating customBinding

Questions?

Thank you

• Andoni Arroyo• andoni.arroyo@gmail.com

• Bloghttp://geeks.ms/blogs/aarroyo/• Web

http://www.andoniarroyo.com/• Twitter

@andoniarroyo• LinkedIn

http://www.linkedin.com/in/andoniarroyo