ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:ch15

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
eg-259:ch15 [2013/03/05 20:34] – [Views Listening to Events] eechriseg-259:ch15 [2013/03/05 20:42] – [Homework Exercises] eechris
Line 468: Line 468:
 [[http://localhost:4567/backbonejs-hands-on/code/05-router-01/index.html|05-router-01]] [[http://localhost:4567/backbonejs-hands-on/code/05-router-01/index.html|05-router-01]]
  
-===== Router =====+===== App Router =====
  
 <code javascript> <code javascript>
Line 505: Line 505:
 Here we create a new object representing the whole application as an ''AppRouter'', which itself is defined as an instance of ''Backbone.Router''. We also call ''Backbone.history.start();'' which enables the browser to record the client-side state as URLs that can be retrieved as bookmarks or using the back button. Here we create a new object representing the whole application as an ''AppRouter'', which itself is defined as an instance of ''Backbone.Router''. We also call ''Backbone.history.start();'' which enables the browser to record the client-side state as URLs that can be retrieved as bookmarks or using the back button.
  
-===== Events on Views =====+===== Events =====
  
 In the second router example [[http://localhost:4567/backbonejs-hands-on/code/05-router-02/index.html|05-router-02]] we add two event listeners to the ''AddView'' so that both the //add// button and pressing //enter// in the text field will cause an event that will trigger the invocation of the ''add'' method that will eventually cause a new project to be added to the collection. In the second router example [[http://localhost:4567/backbonejs-hands-on/code/05-router-02/index.html|05-router-02]] we add two event listeners to the ''AddView'' so that both the //add// button and pressing //enter// in the text field will cause an event that will trigger the invocation of the ''add'' method that will eventually cause a new project to be added to the collection.
Line 514: Line 514:
  
  
-===== Define Model ===== 
  
-<code javascript> +===== Complete CRUD App (in-memory storage) ===== 
-(function ($) {+
  
-    Project = Backbone.Model.extend({});+  * This final version of the app includes a facility for showing existing projects and allowing their titles to be edited. 
 +  * The app now has an ''UpdateView'' which supports the editing feature and the list items now include an id in the URL that allows a particular project to be selected for editing. 
 +  * View the code for insight into how this works
  
-    firstProject = new Project({ +[[http://localhost:4567/backbonejs-hands-on/app/index.html|app/index.html]]
-        title: 'Project 1' +
-    }); +
- +
-})(jQuery); +
-</code> +
- +
-[[http://jsfiddle.net/cpjobling/HHw5j/2/|jsFiddle]] - [[http://localhost:4567/backbonejs-hands-on/code/01-model-10/index.html|01-model-01]] +
- +
-===== Define Model ===== +
- +
-<code javascript> +
-(function ($) { +
- +
-    Project = Backbone.Model.extend({}); +
- +
-    firstProject = new Project({ +
-        title: 'Project 1' +
-    }); +
- +
-})(jQuery); +
-</code> +
- +
-[[http://jsfiddle.net/cpjobling/HHw5j/2/|jsFiddle]] - [[http://localhost:4567/backbonejs-hands-on/code/01-model-10/index.html|01-model-01]] +
- +
-===== Define Model ===== +
- +
-<code javascript> +
-(function ($) { +
- +
-    Project = Backbone.Model.extend({}); +
- +
-    firstProject = new Project({ +
-        title: 'Project 1' +
-    }); +
- +
-})(jQuery); +
-</code> +
- +
-[[http://jsfiddle.net/cpjobling/HHw5j/2/|jsFiddle]] - [[http://localhost:4567/backbonejs-hands-on/code/01-model-10/index.html|01-model-01]] +
- +
-===== Define Model ===== +
- +
-<code javascript> +
-(function ($) { +
- +
-    Project = Backbone.Model.extend({}); +
- +
-    firstProject = new Project({ +
-        title: 'Project 1' +
-    }); +
- +
-})(jQuery); +
-</code> +
- +
-[[http://jsfiddle.net/cpjobling/HHw5j/2/|jsFiddle]] - [[http://localhost:4567/backbonejs-hands-on/code/01-model-10/index.html|01-model-01]] +
- +
-===== Application Router =====  +
-===== Events =====  +
-===== Complete CRUD App (in-memory storage) ===== +
 ===== Summary of this Session ===== ===== Summary of this Session =====
  
Line 591: Line 532:
   * [[eg-259:ch15#Events|Events]]   * [[eg-259:ch15#Events|Events]]
   * [[eg-259:ch15#Complete CRUD App (in-memory storage)|Complete CRUD App (in-memory storage)]]   * [[eg-259:ch15#Complete CRUD App (in-memory storage)|Complete CRUD App (in-memory storage)]]
-===== Homework Exercises ===== 
  
-  - Come up with something 
  
  
eg-259/ch15.txt · Last modified: 2013/03/05 20:44 by eechris