Permalink
Browse files

Quick hack to show how to automatically add module sub-routes to the …

…main route listing.

Signed-off-by: Jesse Beach <splendidnoise@gmail.com>
  • Loading branch information...
1 parent 662b869 commit 6c037a1c3131f025c7f28671b4ba5c6627cdcff2 @jessebeach committed Mar 31, 2012
Showing with 67 additions and 23 deletions.
  1. +40 −19 app/main.js
  2. +9 −2 app/modules/example.js
  3. +17 −1 app/namespace.js
  4. +1 −1 app/templates/example.html
View
59 app/main.js
@@ -9,7 +9,12 @@ require([
"modules/example"
],
-function(namespace, $, Backbone, Example) {
+function(namespace, $, Backbone) {
+
+ // Get the list of overloaded arguments.
+ // These will be the modules defined in require. Modules should not be passed
+ // as explicit arguments of the callee function.
+ var Modules = Array.prototype.slice.call(arguments, arguments.callee.length) || [];
// Defining the application router, you can attach sub routers here.
var Router = Backbone.Router.extend({
@@ -18,26 +23,42 @@ function(namespace, $, Backbone, Example) {
":hash": "index"
},
+ // Add module routes and route callbacks to the Router.
+ initialize: function(Modules) {
+ namespace.mergeSubroutes.call(this, Modules);
+ },
+
index: function(hash) {
var route = this;
- var tutorial = new Example.Views.Tutorial();
-
- // Attach the tutorial to the DOM
- tutorial.render(function(el) {
- $("#main").html(el);
-
- // Fix for hashes in pushState and hash fragment
- if (hash && !route._alreadyTriggered) {
- // Reset to home, pushState support automatically converts hashes
- Backbone.history.navigate("", false);
-
- // Trigger the default browser behavior
- location.hash = hash;
-
- // Set an internal flag to stop recursive looping
- route._alreadyTriggered = true;
+ var ExampleModule;
+ for (var i = 0; i < Modules.length; i++) {
+ if (Modules[i].name && Modules[i].name === 'example') {
+ ExampleModule = Modules[i];
}
- });
+ }
+ // The application depends on the Example module.
+ if (ExampleModule) {
+ var tutorial = new ExampleModule.Views.Tutorial();
+ // Attach the frame to the DOM
+ tutorial.render(function(el) {
+ $("#main").html(el);
+ });
+ }
+ else {
+ $("#main").html('<p>The application could not be initialized.</p>');
+ }
+
+ // Fix for hashes in pushState and hash fragment
+ if (hash && !route._alreadyTriggered) {
+ // Reset to home, pushState support automatically converts hashes
+ Backbone.history.navigate("", false);
+
+ // Trigger the default browser behavior
+ location.hash = hash;
+
+ // Set an internal flag to stop recursive looping
+ route._alreadyTriggered = true;
+ }
}
});
@@ -50,7 +71,7 @@ function(namespace, $, Backbone, Example) {
$(function() {
// Define your master router on the application namespace and trigger all
// navigation from this instance.
- app.router = new Router();
+ app.router = new Router(Modules);
// Trigger the initial route and enable HTML5 History API support
Backbone.history.start({ pushState: true });
View
11 app/modules/example.js
@@ -12,12 +12,19 @@ define([
function(namespace, Backbone) {
// Create a new module
- var Example = namespace.module();
+ var Example = namespace.module({name: 'example'});
// Example extendings
Example.Model = Backbone.Model.extend({ /* ... */ });
Example.Collection = Backbone.Collection.extend({ /* ... */ });
- Example.Router = Backbone.Router.extend({ /* ... */ });
+ Example.Router = Backbone.Router.extend({
+ routes: {
+ 'example/route': 'justAnExample'
+ },
+ 'justAnExample': function (hash) {
+ alert("This is a route from the Example module.");
+ }
+ });
// This will fetch the tutorial template and render it.
Example.Views.Tutorial = Backbone.View.extend({
View
18 app/namespace.js
@@ -50,6 +50,22 @@ function($, _, Backbone) {
},
// Keep active application instances namespaced under an app object.
- app: _.extend({}, Backbone.Events)
+ app: _.extend({}, Backbone.Events),
+
+ // Add module routes and route callbacks to the app.
+ mergeSubroutes: function(Modules) {
+ for (var i = 0; i < Modules.length; i++) {
+ var m = Modules[i];
+ // Proceed if the module extends Backbone.Router.
+ if (m.Router) {
+ var subrouter = new m.Router();
+ if (subrouter.routes) {
+ // Extend the app's routes and route callbacks
+ // with the submodule's routes and route callbacks.
+ $.extend(true, this, subrouter);
+ }
+ }
+ }
+ }
};
});
View
2 app/templates/example.html
@@ -1,7 +1,7 @@
<header>
<img src="/assets/img/backbone.png">
<hr>
-
+ <a href="example/route" style="font-size: 72px;">click me!</a>
<div>
<h2 class="congrats">Congratulations!</h2>
<h2>Seeing this means you have installed Backbone Boilerplate correctly.</h2>

0 comments on commit 6c037a1

Please sign in to comment.