1. Implementing MVVM in JavaScript with Knockout
Knockout
JS

2. Who am I?
• Andoni Arroyo
Development Advisor at Plain Concepts.
• Blog
http://geeks.ms/blogs/aarroyo/
• Web
http://www.andoniarroyo.com/
• Twitter
@andoniarroyo
• LinkedIn
http://www.linkedin.com/in/andoniarroyo

3. 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

4. Why I need a pattern?
• Complexity
• Rightsizing
• Maintain your code
• You are not alone! (diferents profiles)
• Testeability
• UX
• Avoiding roundtrips
• SPA (Web, mobile)

5. 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.

6. MVVM (Model View ViewModel)
• Architectural pattern
• Based on MVC and MVP
• Separate:
• User-interfaces (UI).
• Behavior of the application.
(State and workflow).
• Business logic.

7. 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.

8. View
• Visual representation of that data
Structure, layout, and appearance of what the user sees on the
screen.
• Receives the user’s interaction.

9. 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.

10. 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)

11. Knockout JS
• JavaScript library:
• Declarative Bindings
Easily 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.

12. 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)

13. 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.applyBindings
Create a relation between the View and the source object.

14. Demo
• Demo 1 - Connecting Views to View Models

15. 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.

16. Demo
• Demo 2 - Computed observables

17. Observable Arrays
• Let track lists of items.
• Implementation of the common methods:
push() pop() unshift()
shift() slice() remove()
removeAll() destroy() destroyAll()
sort() reversed() indexOf()

18. 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)

19. Control-Flow Bindings II
• if and ifnot
If the parameter you pass evaluates to true, the contained HTML will
be displayed, otherwise it’s removed from the DOM.
• with
Used to manually declare the scope of a particular block.

20. Demo
• Demo 3 - Control-Flow Bindings

21. 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.

22. 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

23. Demo
• Demo 4 - Interactive Bindings

24. Accessing External Data
• Load ViewModel from JSON
ko.mapping.fromJS
• Converting View Model Data to Plain JSON
ko.mapping.toJS
• knockout.mapping plugin

25. Demo
• Demo 5 - Accessing External Data

26. 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

27. Demo
• Demo 6 - Templates

28. Some common techniques…
• Subscribe to observables.
• The "throttle" extender.
• re-evaluation until its dependencies have stopped changing for a specified
period of time

29. Demo
• Demo 7 - Common techniques

30. Custom bindings
• The way to extend Knockout
• ko.bindingHandlers
• init
Once for each DOM element that you use the binding on.
• set any initial state
• register any event handlers
• update
The associated observable has changed

31. Demo
• Demo 7 – Creating customBinding

32. Questions?

33. Thank you
• Andoni Arroyo
• andoni.arroyo@gmail.com
• Blog
http://geeks.ms/blogs/aarroyo/
• Web
http://www.andoniarroyo.com/
• Twitter
@andoniarroyo
• LinkedIn
http://www.linkedin.com/in/andoniarroyo