Unbreakable Unbreakable - 4 months ago 112
jQuery Question

Backbone: Uncaught Type Error: .. is not a constructor

I am learning Backbone and javascript. I am stuck at one error and this error might be related to pure javascript and not backbone.

While going through tutorial of Backbone (does not uses requireJS), I found below line of code.

var FirstSubViewModel = Backbone.View.extend({
render: function() {
var source = $("#vehicleTemplate").html();
var template = _.template(source);

this.$el.html(template(this.model.toJSON()));
this.$el.attr("data-color", this.model.get("color"));

return this;
},
});


We can clearly see that code
returns this
. And everything works fine.

Now I am trying to do the same in my own code base (I have used require.JS.

My view Model: With Error: Not Working

define(['backbone'], function(Backbone) {
var FirstSubViewModel = Backbone.View.extend({
template: _.template($('#myChart-template').html()),
render: function() {
$(this.el).html(this.template());
var ctx = $(this.el).find('#lineChart')[0];
return this;
},
initialize: function() {
this.render();
}
});
});


My Controller:

define(['backbone', 'FirstSubViewModel'], function(Backbone, FirstSubViewModel)
{ var ch = new dashboardModel.chart({});
new FirstSubViewModel({
^^ HERE I GET ERROR
el: '#chartAnchor1',
model: ch
});
});


My view Model: Working Totally Fine

define(['backbone'], function(Backbone) {
var FirstSubViewModel = Backbone.View.extend({
template: _.template($('#myChart-template').html()),
render: function() {
$(this.el).html(this.template());
var ctx = $(this.el).find('#lineChart')[0];
// return this; Commented Out!**
},
initialize: function() {
this.render();
}
});
return FirstSubViewModel;
});


Issue: Everything works fine if I use
return FirstSubViewModel
at the bottom rather than having return this in the render function . But I want to try
return this
in the
render function
and want everything to work. I dont want to do
return FirstSubViewModel
in the end.

Error when used "return this" in the render function:

FirstSubViewModel
is not a constructor

Answer

Last return defines what will be included in other modules and in this case is required. Without this this module return undefined.

Lets try in console:

x = undefined
new x()

TypeError: x is not a constructor

return FirstSubViewModel is mandatory. return this in render function is recommended.

Code:

define(['backbone'], function (Backbone) {
    var FirstSubViewModel = Backbone.View.extend({
        template: _.template($('#myChart-template').html()),
        render: function () {
            console.log("inside first sub view render");
            $(this.el).html(this.template());
            var ctx = $(this.el).find('#lineChart')[0];
            return this;

        },
        initialize: function () {
            this.render();
        }
    });

    return FirstSubViewModel; // Works as expected.
});