Question

I have an application that has a middle panel that always changes depending on what part of the application the user is looking at. These might be messages, transactions etc.

Then there are 4 ‘fixed’ panels at the 4 corners of the application around the middle panel that are mostly fixed for the lifetime of the application, but contain dynamically updated data and therefore need to be implemented using backbone.js

How do I structure such an application in backbone.js. It seems to defeat the “Do not repeat” rule to implement the intial rendering for all the side panels within every route in the router as I would end up repeating the same rendering code in every route.

How do I structure my code in this instance so that I don’t repeat code in multiple places.

Answer 1

JavaScript is like any other code: if you find yourself writing the same lines of code, extract them in to a function. If you find yourself needing to use the same function, extract it (and related functions and data) in to its own object.

So, your router shouldn’t be calling your views and models directly. Instead, it should be delegating to other objects that can manipulate your views and objects.

Additionally, since your going to set up the same basic page layout every time the app starts up, you might not want that code in the router. The layout happens whether or not the router fires, and no matter which route is fired. Sometimes it’s easier to put the layout code in another object, as well, and have the layout put in place before the router fires up.

MyApplication = {
  layout: function(){
    var v1 = new View1();
    v1.render();
    $("something").html(v1.el);

    var v2 = new View2();
    v2.render();
    $("#another").html(v2.el);
  },

  doSomething: function(value){
    // do someething with the value
    // render another view, here
    var v3 = new View3();
    v3.render();
    $("#whatever").html(v3.el);
  }
}

MyRouter = Backbone.Router.extend({
  routes: {
    "some/route/:value": "someRoute"
  },

  someRoute: function(value){
    MyApplication.doSomething(value);
  }
});

// start it up
MyApplication.layout();

new MyRouter();

Backbone.history.start();

I’ve written a handful of articles relating to these things, which you might find useful:

http://lostechies.com/derickbailey/2012/02/06/3-stages-of-a-backbone-applications-startup/

http://lostechies.com/derickbailey/2011/08/30/dont-limit-your-backbone-apps-to-backbone-constructs/

http://lostechies.com/derickbailey/2011/12/27/the-responsibilities-of-the-various-pieces-of-backbone-js/

http://lostechies.com/derickbailey/2012/03/22/managing-layouts-and-nested-views-with-backbone-marionette/