Backbone subviews and switch

Question

ActiveWindow is like the main container and below the subviews. Router trigger activewindow.render(options) then the switch operates. Is it fine to do that Or how bad is it?

define('activewindowView', [
 'backbone',
 'text!views/activewindowView/activewindowTemplate.html',
 'ghostviewHunter',
 'menuView',
 'commercesView',
 'horairesView',
 'servicesView',
 'destinationsView',
 'breadcrumbView',
 'staytunedView',
 'helpView',
 'transportsView',
 'aroundView',
 'infoslegalesView',
 'royalsliderView',
 'anomalieView',
 'anomalieReportView',
 'searchView'
 ], function(Backbone, ActivewindowTemplate, GhostviewHunter, MenuView, CommercesView, HorairesView, ServicesView, DestinationsView, BreadcrumbView, StaytunedView, HelpView,
 TransportsView, AroundView, InfoslegalesView, RoyalsliderView, AnomalieView, AnomalieReportView, Searchview) {
 var ActivewindowView = Backbone.View.extend({
 el: '#activewindow',
 template: _.template(ActivewindowTemplate),
 events: {},
 initialize: function() {
 _.bindAll(this, 'render', 'renderSubview');
 },
 render: function(options) {
 this.$el.html(this.template(options));
 this.renderSubview(options);
 },
 renderSubview: function(options) {
 // create fil d'ariane view
 this.breadcrumbView = new BreadcrumbView();
 GhostviewHunter.addView(this.breadcrumbView);
 // render activewindow subview
 switch(options.subview) {
 case 'menu':
 this.menuView = new MenuView();
 this.menuView.render();
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.menuView);
 break;
 case 'commerces':
 this.commercesView = new CommercesView(options);
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.commercesView);
 break;
 case 'horaires':
 this.horairesView = new HorairesView();
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.horairesView);
 break;
 case 'services':
 this.servicesView = new ServicesView(options);
 //this.servicesView.render();
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.servicesView);
 break;
 case 'destinations':
 this.destinationsView = new DestinationsView(options);
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.destinationsView);
 break;
 case 'staytuned':
 this.staytunedView = new StaytunedView(options);
 this.staytunedView.render();
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.staytunedView);
 break;
 case 'help':
 this.helpView = new HelpView();
 this.helpView.render();
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.helpView);
 break;
 case 'transports':
 this.transportsView = new TransportsView(options);
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.transportsView);
 break;
 case 'around':
 this.aroundView = new AroundView(options);
 this.aroundView.render();
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.aroundView);
 break;
 case 'infoslegales':
 this.infoslegalesView = new InfoslegalesView();
 this.infoslegalesView.render();
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.infoslegalesView);
 break;
 case 'royalslider':
 this.royalsliderView = new RoyalsliderView(options);
 GhostviewHunter.addView(this.royalsliderView);
 break;
 case 'anomalie':
 this.anomalieView = new AnomalieView(options);
 this.anomalieView.render();
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.anomalieView);
 break;
 case 'anomalieReport':
 this.anomalieReportView = new AnomalieReportView(options);
 this.anomalieReportView.render(options);
 this.breadcrumbView.render(options);
 GhostviewHunter.addView(this.anomalieReportView);
 break;
 /*case 'search':
 this.*/
 }
 }
 });
 return ActivewindowView;
})

• 301_Moved_Permanently: Out of the blue, this question is incomplete. To help reviewers give you better answers, please add sufficient context to your question. The more you tell us about what your code does and what the purpose of doing that is, the easier it will be for reviewers to help you. Questions should include a description of what the code does
• François Richard: "Router trigger activewindow.render(options) then the switch operates." That's a way to render subviews. I think it's pretty clear for anyone having tried backbone once but I can bring more details if you tell me what would help you to understand
• 301_Moved_Permanently: You could tell us about the why you wanted a subview in the first place. Help us understand the differences between each subview (as it appears some need to be rendered before continuing processing and the others don't). In short, show a bit of your thought process so we are not left wondering about the ins and outs of your code.
• François Richard: difference with each subviews doesn't matter (you need to render it directly when no model is attached). I need those subviews because it takes the same place in my page. Actually maybe I don't need it but that's the way I did (if there is a better way I'd be very happy to know it). I was wondering if anyone use this kind of switch or if it's obviously a bad practice ... what do you think ?

Answer 1

I am glad that you are following conventions. That way is really simple to hack the code in order to shorten it. All you have to do is to create the right View instance and all the remaining code is the same.

I will be using the simplest but also the most frowned upon way to do such thing, using eval.

//View name without View sufix starting with Capital letter
var viewName = options.subview[0].toUpperCase() + options.subview.substr(1);
var view = eval('new ' + viewName + 'View(' + JSON.stringify(options) + ')');
this[options.subview + 'View'] = view;
view.render();
this.breadcrumbView.render(options);
GhostviewHunter.addView(view);