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;

})

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);