I am thinking of writing some online notes/book. Amongst other things, I want to use Backbone to show different sections within a chapter as separate views. In other words, I want each chapter to behave like a single page application; different chapters will behave as separate single page applications. Within a chapter, as the user navigates from one section to another, I don't want the page to reload and am thinking of using the Backbone router to show these section views.
Please take a quick look at the code below and let me know if you see anything problematic with how I am using Backbone routing to render views.
The code works, but I want to know if I am doing anything inefficiently and if there are any "good practice" principles that I am violating. For example, I create new view instance every time the route changes. Is there a way to do this better?
(function() {
var bApp = {
model: {},
view: {},
collection: {},
router: {}
};
window.bApp = bApp;
bApp.view.section = Backbone.View.extend({
el: 'div#chapter2',
template: nunjucks.render('./client/views/client-templates/ch2_sec2.html'),
render: function() {
this.$el.html(this.template);
return this;
}
});
bApp.router = Backbone.Router.extend({
routes: {
'': 'showroute_ch2sec1',
'ch2sec1': 'showroute_ch2sec1',
'ch2sec2': 'showroute_ch2sec2'
},
showroute_ch2sec1: function() {
section1 = new bApp.view.section;
section1.template = nunjucks.render('./client/views/client-templates/ch2_sec1.html');
section1.render();
},
showroute_ch2sec2: function() {
section2 = new bApp.view.section;
section2.template = nunjucks.render('./client/views/client-templates/ch2_sec2.html');
section2.render();
}
});
var r = new bApp.router;
Backbone.history.start();
})();
<div id="chapter2">
in the DOM? Are you sure you want to render both views into the same element? \$\endgroup\$