Backbone.js: Where do I put my jQuery setup?

Question

I'm getting to grips with Backbone.js, but one thing I don't understand is where to put all the one-off jQuery code I need to set up my page.

You know the sort of thing: configuring a jQuery carousel plugin, adding a 'scroll to top' arrow... the one-off configuration that happens when the user first loads the page.

At the moment I'm doing it in my Router:

 var AppRouter = Backbone.Router.extend({
  routes: {
    // some routes
  },
  initialize: function() {
    initializeJqueryStuff();
  } ...
 });
 var StateApp = new AppRouter();
 Backbone.history.start({
   pushState: true
 });
 function initializeJqueryStuff() { 
   // one-off jQuery stuff goes here
 }

Yeuch. How should I be doing it? Should initializeJqueryStuff be another property of the Router object? Should it all just live inside initialize ? Or should I actually keep this code completely separate from the Backbone app?

Answer 1

I typically define a LayoutView , ie a root view which is responsible for rendering all the "actual" views in the application. This layout view is only initialized once, before any other view code needs to run. It's also where I tend to do any one-off view configurations.

Sample:

//LayoutView should be considered a singleton, only initialized once
var LayoutView = Backbone.View.extend({
    el:'body',

    initialize: function() {
        this.initializeSomejQueryStuff();
    },

    renderChild: function(child) {
        if(this._currentChild)
            this._currentChild.remove();
        this._currentChild = child;
        this.$el.html(child.render().el);
    },

    initializeSomejQueryStuff: function() {
        //init here
    }
});

Usage:

var AppRouter = Backbone.Router.extend({
    routes: {
        "foo/:id": "foo"
    },

    initialize: function() {
        this.layout = new LayoutView();
    },

    foo: function(id) {
        var model = new Foo({id:id});
        var view = new FooView({model:model});

        //delegate the view rendering to a layout
        this.layout.renderChild(view);
    }
});

Answer 2

Hmm... sorry if I miss out some details in case of my bad English. But as I can see the main point of your question: where you may configure and place you jQuery stuff, that not associated with Backbone? In all you may separate this code and just link it in .html

Backbone just little MVC. You can manipulate you render's functions and some js stuff associated with views in Backbone.View.extend({...}) , but in all, I think it is a good point to make different structure for different thing. smth like this:

.../
   public/
         css/
         img/
         lib/
            ..any source code for your plugins..
         tpl/
            ..for your templates..
         js/
           models/
                 models.js
           views/
                ..your views.js..
           main.js(your backbone router and for example, .loadTemplate() func for templates and other)
           ..any code for plugings configuration..

So As I think that structure can help in understanding what is source what and take you coding clear.

Hope it was helpful for you. Sorry if I misunderstand smth.