EN / Courses / Using Knockout To Build Dynamic, Testable Web UIs / Course Detail

Using Knockout To Build Dynamic, Testable Web UIs

The Knockout library provides support for data binding in a JavaScript and HTML environment. This in turn enables web developers to put the the MVVM (Model, View, View-Model) presentation pattern to use. Much of Knockout's popularity is thanks to the way it simplifies writing dynamic UIs. It has also been embraced by Microsoft, and is now included with ASP.NET MVC. Applying the MVVM pattern also offers another great benefit: the ability to easily write good unit tests for interaction logic!

This course will teach you how to use Knockout effectively - but it doesn't stop there. It also teaches you what a view model is, what it should be responsible for, and how to factor it. And, perhaps most importantly, you will learn how to write tests for your view models.

Along with explanations of the patterns and techniques involved and many code walkthroughs, the course also has a series of practical labs, providing an opportunity for you to dig in to Knockout and try writing view model tests for yourself.


Basic knowledge of HTML and prior experience with JavaScript programming.

It's enough if you are familiar with syntax and comfortable with functions. If not, consider the course *Modern web development with JavaScript*.

What you will learn

Day 1


  • The architecture of the web
  • The rise of the Single Page Application
  • The challenge of user experience
  • The need for testability
  • The role of design patterns, and how they help

The MVVM Presentation Pattern

  • So what is a model, anyway?
  • RESTful models
  • Views
  • View Models
  • Data binding
  • The observer pattern

Introducing Knockout

  • What is Knockout?
  • Declarative data binding in HTML
  • Creating simple view models with observables
  • Binding the view model to the view
  • Exercise: your first view model

Basic View Model Testing

  • What is unit testing?
  • Why write automated tests?
  • Introduction to QUnit
  • Writing basic view model unit tests
  • Exercise: writing some basic view model tests

Computed Observables

  • What is a computed observable?
  • How dependency tracking works
  • Writing tests
  • Writable computed observables
  • Exercise: using a testing computed observables

Event Binding and Server Interaction

  • Client side view model, server side model
  • Event binding
  • How to factor the server interaction for testability
  • Implementing the call to the server
  • Testing the interaction without really calling the server
  • Exercise: event binding and server interaction

Day 2

Observable Arrays

  • What is an observable array?
  • The foreach binding
  • Populating with data from the server side - in a testable way
  • Exercise: observable arrays and the foreach binding

Filling In Some Gaps: More Bindings and the Binding Context

  • The if and ifnot bindings
  • The with binding
  • The css, style and attr bindings
  • The hasFocus binding
  • The uniqueName binding, and when you may need it
  • The binding context, $root, $data, $parent, $index and $element
  • Exercise: bindings and binding contexts


  • The re-use problem templates tackle
  • Basic template usage
  • Rendering tree-like data using templates
  • Dynamically selecting templates
  • Integrating other template engines
  • Exercise: templates

Custom Bindings

  • What are custom bindings?
  • Using a plug-in providing a custom binding
  • Writing your own custom binding
  • Exercise: custom bindings

Also Good To Know

  • Augmenting observables with extenders
  • The throttle extender
  • The mapping plug-in
  • Performance gotchas
  • Where to find stuff: plug-ins, examples, documentation

Course info

  • Course code: T176
  • Course duration: 2 days
  • Price: 19500 SEK


Jonathan Worthington
Jonathan Worthington


  • Please share on LinkedIn
  • Please share on Facebook
  • Please share on Twitter

Contact us for details



All prices excluding VAT

Copyright © Edument AB. All rights reserved.