Java Script – MVVM & TDD

Itzik Saban

Itzik.saban@picscout.com

Agenda•Demonstration of TDD importance•Quick Intro to MVVM & Knockout.js•Quick Intro to jasmine•Example•Practicing

TDD Importance

TDD importance

Possible points of failure:• Changes in UI logics• Renaming• Merges• Wrong syntax• etc.

Introduction to MVVM

Introduction to MVVM

Bad code for testing:

Introduction to MVVM

Good code for testing:

Introduction to MVVM

Model-View-ViewModel

Introduction to MVVM

Model-View-ViewModel

• The model is a set of one or more json objects, usually representing entities in the domain.

Introduction to MVVM

Model-View-ViewModel

Introduction to MVVM

Model-View-ViewModel

• The view is actually the html itself.

Introduction to MVVM

Model-View-ViewModel

Introduction to MVVM

Model-View-ViewModel

• The ViewModel is a javascript object which is responsible to handle the UI logics.

Introduction to MVVM

Model-View-ViewModel

Introduction to MVVM

Model

ViewModel

Binding Mechanism

(Knockout.js)

View

Introduction to Knockout.js

Introduction to Knockout.jsTextBox

HTML:

ViewModel:

Introduction to Knockout.jsComboBox

HTML:

ViewModel:

Introduction to Knockout.jsButton

HTML:

ViewModel:

Introduction to jasmine

Introduction to jasmin