Passed parameter to initialize() view is undefined in Backbone.js

Question

I'm working on a Backbone.js app which utilizes a 'master view' which all views and subviews extend from.

Master view

define(['backbone'], function (Backbone) {
   return Backbone.View.extend({
      events: {

      },

      showSuccess: function (msg) {
         alert(msg);
      }
   });
});

I then have a Main View which generates the page, this can call on sub views for smaller parts:

define(['backbone','masterView', 'mySubView'], function (Backbone, mView, mySubView) {
   var mainView = mView.extend({
      events: function () {
         return _.extend({}, coreView.prototype.events, {

         });
      },

      render: function () {
         var sub = new mySubView({'foo': 'bar'});
      }
   });
   return new mainView();
});

Finally, my subview, which when it's initialised, it says that options is undefined.

define(['backbone','masterView', 'mySubView'], function (Backbone, mView, mySubView) {
   var subView = mView.extend({
      events: function () {
         return _.extend({}, coreView.prototype.events, {

         });
      },

      initialize: function (options) {
         console.log(options);
      }
   });
   return new subView();
});

In this setup, why is options undefined when I passed them in my MainView? If the subview doesn't extend masterView, but Backbone.view instead, it works fine.

Answer 1

Your last line in the subview file:

return new subView();

You're returning a new instance instead of returning the constructor in the subview module. It should be:

return subView;

Note that as a convention, JavaScript code should use PascalCase for types (constructor, classes, etc.), and instances (variables, properties, etc.) should use camelCase.

Also, I'm sharing tricks on how to design a good base class with Backbone. You could shift the responsibility of merging the events to the base class instead of each child class.