nothing-special-here
nothing-special-here

Reputation: 12578

How to reduce repeated code in Backbone Router

In my routers initialize methods have the same code (the code is repeated 3 times!).

I got 3 routers, so if I want to refactor code (change name etc) I will have to jump to 3 separate files and apply changes on each file.

Here goes the code:

initialize: =>
  # http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
  @contentView = new Backbone.AppView(".js-content")
  @searchView = new Backbone.AppView(".js-searchbox")
  @sidebarView = new Backbone.AppView(".js-sidebar")

Is there some kind of technique to DRY this code?

Some kind of superclass?

I use coffeescript.

Upvotes: 1

Views: 208

Answers (2)

Daniel Aranda
Daniel Aranda

Reputation: 6552

You need to create an Abstract Router that do the initialization of required views and then your specific Routers must extend it:

var BaseRouter = Backbone.Router.extend({
  initialize : function(){
    console.log('Native Router!');
    this.contentView = new Backbone.AppView(".js-content");
    this.searchView = new Backbone.AppView(".js-searchbox");
    this.sidebarView = new Backbone.AppView(".js-sidebar");
    }
});
var RouterOne = BaseRouter.extend({
  initialize : function(){
    BaseRouter.prototype.initialize.call(this);
    //specific stuff
  }
});
var RouterTwo = BaseRouter.extend({
  initialize : function(){
    BaseRouter.prototype.initialize.call(this);
    //specific stuff
  }
});

var router1 = new RouterOne();
var router2 = new RouterTwo();

Upvotes: 2

Zachary Friedman
Zachary Friedman

Reputation: 109

It looks like the parts of your DOM that you are instantiating here can all be considered 'child views' of a 'parent view'. By this token, why don't you instantiate @pageView = new BB.AppView(...) and then in @pageView's render() method go ahead and instantiate these three 'child classes'?

Upvotes: 1

Related Questions