backbone.js - Create javascript object dynamically (Backbone View) -

the context here backbone it's general question dynamically creating javascript objects.

i pass name of view ('viewx') created, function can invoke view constructor: new viewx()

how this?

some more context:

in backbone view want create subview, type of depends on model have used current view.

at moment have non-dynamic if-else approach (see approach #1 in example) works, clunky , more clunky in future when have more model types.

i have tried dynamic approaches creating subview, including evaluation via function constructor (approach #2), gives 'string not function' error.

in approach #3, view module passing parameter not available in current view's this namespace (i using requirejs).

rendercontentlist: function() {      var self = this;      // approach #1     var setsidebarlistcollectionview = function(type) {        if (type === 'tags') {            self.sidebarlistcollectionview = new tagsidebarlistcollectionview({                collection: self.collection,                tagcollection: self.tagcollection            });        } else {            self.sidebarlistcollectionview = new cardsidebarlistcollectionview({                collection: self.collection,                tagcollection: self.tagcollection            });        }     };     /*     // approach #2     var setsidebarlistcollectionview = new function('type', 'coll', 'tagcoll', 'return new type({collection: coll, tagcollection: tagcoll});');      // approach #3     var setsidebarlistcollectionview = function(type) {         return new self[type]({                         collection: self.collection,                         tagcollection: self.tagcollection                     });     };     */     // reset every time     if (this.sidebarlistcollectionview) {         this.sidebarlistcollectionview.remove();     }     if (this.model.get('activesubtab') === 'tags') {         // approach #1         setsidebarlistcollectionview('tags');         // approach #2         // this.sidebarlistcollectionview = setsidebarlistcollectionview('tagsidebarlistcollectionview', this.collection, this.tagcollection);         // approach #3         // this.sidebarlistcollectionview = setsidebarlistcollectionview('tagsidebarlistcollectionview');     } else {         // approach #1         setsidebarlistcollectionview('cards');         // approach #2         // this.sidebarlistcollectionview = setsidebarlistcollectionview('cardsidebarlistcollectionview', this.collection, this.tagcollection);         // approach #3         // this.sidebarlistcollectionview = setsidebarlistcollectionview('cardsidebarlistcollectionview');     }      // render list of content title links.     this.$el.find('#content-manager-list-content').append(this.sidebarlistcollectionview.render().el); }, 

i have asked question on @ stack exchange code review, perhaps better fit it.

one way can achieve making extending backbone.events.

1.create controller object extends backbone.events.
2.define custom events each view creation.
3.trigger appropriate custom event create view.

var appviewbus = _.extend({},backbone.events);    appviewbus.on("showview:viewx",function(payload){     // load data if required.     // create view instance passing loaded data.     // render view. });  appviewbus.on("showview:viewy",function(payload){     // load data if required.     // create view instance passing loaded data.     // render view. }); 

now wherever need create new view dynamically can below since know view want create.

var payload = {     // add properties require pass      // down controller method }; appviewbus.trigger("showview:viewx",payload);  

you can reuse these methods router callbacks making code more reusable , maintainable.