1. JS301 Week 4
Knockout and Objects

2. Knockout
Knockout makes it easier to keep your data and your UI in sync with each other.
It is based on the MVVM (Model, View, ViewModel) pattern...

3. Model, View, ViewModel (MVVM)
This is the data which is linked to the user interface 3 1 4 2
View
This is the HTML and JavaScript which make up your UI..
Model
This is the native data stored by your application.

4. Model, View, ViewModel (MVVM)
Data is "imported" from your native model to the ViewModel
When data is updated it is "exported" back to your native model
When data in the ViewModel is updated, those updates are automatically written to the UI
When data in the UI is updated, those changes are automatically written to the ViewModel

5. Model, View, ViewModel (MVVM)
The simplest examples skip the Model and just use a ViewModel and View
Practical use does require a Model to store values

6. Knockout Examples Hello World: http://jsfiddle.net/zymsys/7vTBT/
Click Counter:
Simple List:

7. Learning Knockout
There are more examples here:
And an excellent interactive tutorial here:

8. Basic Object Literals
The easiest way to create an object is with an object literal:
No class definitian / object instantiation!

9. Object Constructors
You can make similar objects with a constructor function:
By convention, constructors always start with an upper case character, and other functions always start with a lower case character.

10. Objects & the importance of New
If we don't use new for constructors we run into big problems:
You can write constructors which fix this:

11. Objects: This and That
In most OO languages, this refers to the running instance of a class.
JavaScript doesn't have classes, but it does have "this".
This doesn't always work as expected!

12. Objects: This and That
Depending on the value of 'this' can cause problems.
You can get around 'this' problem by creating your own copy of 'this':
The copy is commonly called 'that' or 'self'.

13. Objects: Private Variables
Using private variables can get around the this / that problem completely:

14. Objects: Inheritance
Objects can inherit behaviours from other objects:
(confusing)
(less confusing?)

15. Objects: Parts / Traits
Instead of inheriting functionality you can add "Parts" or "Traits" to any object:

16. Where to go from here? Experiment with consoles or jsfiddle.net
Tutorials (JavaScript, jQuery, knockout.js)
Books (in order of difficulty):
Head First JavaScript
JavaScript: The Definitive Guide
JavaScript Patterns
Test-Driven JavaScript Development
JavaScript: The Good Parts (Difficult!)
Real world projects
Framework Source (jQuery, MooTools, YUI)