CODEWITHSUNDEEP
backbone.jsrequirebackbone-routing
beNerd
beNerd

Reputation: 3374

Application structure in backbone and requirejs app

I am developing a app using backbone and requirejs. I have structured the app like this:

  1. A main index.html file having <script data-main="app.js" src="vendor-libraries/require.js"></script>

  2. In app.js i do like this:

    require.config({

    paths:{
//all paths here
},

shim: {
    // all shims here
    },
    }
 });

     require(['jquery',
 'Backbone',
 'views/master',
 'views/dashboard',
 //all other views are loaded as dependencies here...

 ],function($,Backbone,masterView,dashboardView, .....){

     var Router=Backbone.Router.extend({
         routes:{
              "":"loadDashboard",
              "home":"loadDashboard",
              //all routes paths go here
            },

        initialize:function(){
        this.children={
        dashboardView: new dashboardView(),
        //all views initialized as the dashboard view
        }
    },

    loadDashboard: function(){
    this.children.dashboardView.render();
    },

    //functions for all routes here...

    });

var router = new Router();
var view=new masterView();
Backbone.history.start();

    });

  3. In the master view i just navigate on the click of the buttons to respective views.

Now, I am just beginning with this app and my fear is that, following the above work flow can result in loading of ALL the view files at once. And in all the views, i have several templates getting loaded. So will i end up with every bit of html loaded before page render? If yes, what should be modified in the above approach?

Upvotes: 0

Views: 383

Answers (1)

Ingro
Ingro

Reputation: 2841

Well if have too many things to be loaded on your page you could just require your views files as they are needed.

For example let's say you will have a Userlist View, it could be loaded in this way from your router:

routes: {
    ...
    'userslist' : 'loadUsersList'
}

loadUsersList: function() {

    require('views/userslist',function(UserListView) {

        UserListView.render();
    });

}

Upvotes: 1

Related Questions