Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I needed this for a recent project, I plan to release this code as open source at some point, but you can do something like this:</p> <p>Create a global router to handle all routing:</p> <pre><code>App.GlobalRouter = Backbone.Router.extend({ initialize: function(){ this._routes = {}; }, registerRoute: function(route, rootRoute){ var rootName; if(rootRoute) { route = rootRoute + '/' + route; rootName = this.registerRoute(rootRoute); } if(!_.isRegExp(route)) route = this._routeToRegExp(route); var name = this._routes[route] ? this._routes[route] : _.uniqueId('r'); this._routes[route] = name; this.route(route, name, function(){}); if(rootName) { this.on('route:'+name, function(){ var args = slice(arguments); this.trigger.apply(this, ['route:' + rootName].concat(args)); }.bind(this)); } return name; } }); </code></pre> <p>Then create a single one:</p> <pre><code>App.globalRouter = new App.GlobalRouter(); </code></pre> <p>Then create a modified router to extend all your routers from: </p> <pre><code>App.Router = Backbone.Router.extend({ constructor: function (options){ options = options || {}; if(options.root) this.root = options.root; this.globalRouter = App.globalRouter; Backbone.Router.apply(this, [options]); }, route: function(route, name, callback, root){ if(!App.globalRouter) return false; // If callback is root param if(callback &amp;&amp; !_.isFunction(callback)) { root = callback; callback = null; } // If no name is callback param. if(_.isFunction(name)) { callback = name; name = ''; } if(!callback) callback = this[name]; var router = this; var roots = root || this.root; if(roots &amp;&amp; !_.isArray(roots)) roots = [roots]; if(roots) { _.each(roots, function(root){ var globalName = App.globalRouter.registerRoute(route, root); router.listenTo(App.globalRouter, 'route:'+globalName, function(){ var args = slice(arguments); var callbackArgs = args.slice(callback &amp;&amp; -callback.length || 0); callback &amp;&amp; callback.apply(router, callbackArgs); router.trigger.apply(router, ['route:' + name].concat(callbackArgs)); router.trigger('route', name, callbackArgs); }); }); } else { var globalName = App.globalRouter.registerRoute(route); router.listenTo(App.globalRouter, 'route:'+globalName, function(){ var args = slice(arguments); var callbackArgs = args.slice(callback &amp;&amp; -callback.length || 0); callback &amp;&amp; callback.apply(router, callbackArgs); router.trigger.apply(router, ['route:'+name].concat(callbackArgs)); router.trigger('route', name, callbackArgs); }); } return this; } }); </code></pre> <p>From here you can create as many routers that are required and register them on the same route, also you can create a router that has route routes to listen on, so in your case you would have probably 2 or 3 routers, here is an example of what you could do:</p> <pre><code>var defaultRouter = App.Router.extend({ routes: { 'dashboard': 'showDashboard', 'game/:id': 'showGame' }, showDashboard: function() {}, showGame: function(id) {}, }); var profilerRouter = App.Router.extend({ root: [ 'dashboard', 'game/:id' ], routes: {'profile', 'showProfile'}, showProfile: function(){//Show lightbox} }); </code></pre> <p>This will listen for <code>/dashboard</code> or <code>/game/:id</code> and call that funciton on <code>defaultRouter</code> that is listening. Then if the <code>/profile</code> is on the end of the url for either of the routes is will catch that and run the <code>showProfile</code> function on the profileRouter.</p> <p><strong>NOTE: I've quickly modified the code take from my project to change some of the name/namespace issues, so you might need to check that I haven't missed anything, but the code should be right otherwise</strong></p> <p>Updated Example:</p> <ul> <li>If the user navigates to <code>/game/:id</code> it will call the <code>defaultRouter &gt; showGame</code> with param <code>:id</code>.</li> <li>If the user navigates to <code>/game/:id/profile</code> it will call the <code>defaultRouter &gt; showGame</code> with param <code>:id</code>. It will also call <code>profileRouter &gt; showProfile</code> but with no params (ie. it doesn't send the :id from the /game/:id root).</li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POGood pattern for doing additive routes in Backbone
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCubed Eye
    1. USCubed Eye
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POGood pattern for doing additive routes in Backbone
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COI think I'm missing the key insight here--Is this grabbing the first thing before the `/` and any params using that regexp stuff, then passing on to leaf routes after that?
      singulars
      1. PO
      1. USSimplGy
    2. CO@SimpleAsCouldBe does my update answer your question?
      singulars
      1. PO
      1. USCubed Eye
    3. COYeah, totally! And it answers the larger question, which is whether this exists already. I'm surprised it doesn't, I thought this would be a common need. Seems like a great candidate for a library. Writing tests around this behavior is stretching my mind though.
      singulars
      1. PO
      1. USSimplGy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload