Reputation: 3374
I am developing a app using backbone and requirejs. I have structured the app like this:
<script data-main="app.js" src="vendor-libraries/require.js"></script>
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();
});
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
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