JS301 Week 4

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) ViewModel 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: http://jsfiddle.net/zymsys/JryVC/ • Simple List: http://jsfiddle.net/zymsys/QLjAW/

7. Learning Knockout • There are more examples here:http://knockoutjs.com/examples/ • And an excellent interactive tutorial here:http://learn.knockoutjs.com/

8. Basic Object Literals • The easiest way to create an object is with an object literal:http://jsfiddle.net/zymsys/nUS7k/ • No class definitian / object instantiation!

9. Object Constructors • You can make similar objects with a constructor function:http://jsfiddle.net/zymsys/PVRyS/ • 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:http://jsfiddle.net/zymsys/zVfE4/ • You can write constructors which fix this:http://jsfiddle.net/zymsys/KgHhN/

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!http://jsfiddle.net/zymsys/6Dq2W/

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':http://jsfiddle.net/zymsys/nthJA/ • The copy is commonly called 'that' or 'self'.

13. Objects: Private Variables Using private variables can get around the this / that problem completely:http://jsfiddle.net/zymsys/E2pUX/

14. Objects: Inheritance Objects can inherit behaviours from other objects: • http://jsfiddle.net/zymsys/NVCyU/(confusing) • http://jsfiddle.net/zymsys/6uCgk/(less confusing?)

15. Objects: Parts / Traits Instead of inheriting functionality you can add "Parts" or "Traits" to any object: http://jsfiddle.net/zymsys/xpgQA/

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)