Both sides previous revisionPrevious revisionNext revision | Previous revision |
eg-259:ch15 [2013/03/05 20:32] – [Router] eechris | eg-259:ch15 [2013/03/05 20:44] (current) – [Complete CRUD App (in-memory storage)] eechris |
---|
[[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> |
---- | ---- |
| |
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. | 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. |
| |
===== Router Initialisation ===== | ===== Router Initialisation ===== |
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 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. |
| |
===== Views Listening to Events ===== | ===== Views Listening to Events ===== |
| |
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, the whole list is redrawn. | 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. |
| |
| |
===== 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]] | |
| |
===== 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 ===== |
| |
* [[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 | |
| |
| |