| 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 | |
| |
| |
