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
eg-259:ch15 [2013/03/05 20:09] – [Initialize View] eechriseg-259:ch15 [2013/03/05 20:44] (current) – [Complete CRUD App (in-memory storage)] eechris
Line 459: Line 459:
  
  
-===== Define Model =====+===== Router =====
  
-<code javascript> +Here we have a more complex example using three templates: 
-(function ($) {+  * One for the Project list 
 +  * One for the project detail -- including a form for editing the title of the selected project 
 +  * One to render the list items themselves. 
 +Here is the code: 
 +[[http://localhost:4567/backbonejs-hands-on/code/05-router-01/index.html|05-router-01]]
  
-    Project = Backbone.Model.extend({});+===== App Router =====
  
-    firstProject = new Project({ +<code javascript> 
-        title: 'Project 1'+    AppRouter = Backbone.Router.extend({ 
 +        routes: { 
 +            "": "home", 
 +            "add": "add", 
 +            "close": "home", 
 +        }, 
 +        home: function () { 
 +            console.log('home'); 
 +            new HomeView(); 
 +        }, 
 +        add: function () { 
 +            console.log('add'); 
 +            new AddView(); 
 +        }
     });     });
- 
-})(jQuery); 
 </code> </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 =====+The purpose of the router is to define some "URL"s that the client will use to navigate around the application. These are simply strings that map a URL to a method. In this example, they map the client-side URLs ''#'', ''#add'' and ''#close'' to the methods ''home'', ''add'' and ''home'' respectively. These methods in turn will create, dynamically, a //home view// and an //add view// which will respectively display the list of projects and allow a project to be added.
  
-<code javascript> +===== Router Initialisation =====
-(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> <code javascript>
-(function ($) { +$(document).ready(function () { 
- +    projectApp = new AppRouter(); 
-    Project = Backbone.Model.extend({}); +    Backbone.history.start(); 
- +});
-    firstProject = new Project({ +
-        title: 'Project 1' +
-    }); +
- +
-})(jQuery);+
 </code> </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 =====+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.
  
-<code javascript> +===== Events =====
-(function ($) {+
  
-    Project = Backbone.Model.extend({});+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.
  
-    firstProject = new Project({ +===== Views Listening to Events =====
-        title: 'Project 1' +
-    });+
  
-})(jQuery); +In the final iteration [[http://localhost:4567/backbonejs-hands-on/code/05-router-03/index.html|05-router-03]], we add the new project to the project collection and also register an event listener on the ''ListView'' so that when a new project is added, a change event is fired and the whole list is redrawn.
-</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> +===== 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. 
 +  * It overrides the ''Backbone.sync'' object to allow data to be read from an array of objects in memory rather than a RESTful api (which is it's default behaviour). 
 +  * 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]] +
- +
-===== Application Router =====  +
-===== Events =====  +
-===== Complete CRUD App (in-memory storage) ===== +
 ===== Summary of this Session ===== ===== Summary of this Session =====
  
Line 552: Line 533:
   * [[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.1362514196.txt.gz · Last modified: 2013/03/05 20:09 by eechris