骨干：未捕获类型错误：..不是构造函数

Question

我正在学习Backbone和JavaScript。我被困在一个错误，这个错误可能与纯JavaScript而不是骨干相关。

在经历骨干教程（不使用requireJS）的同时，我找到了下面的代码行。

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

我们可以清楚地看到，代码returns this。一切正常。

现在我试图做同样的在我自己的代码库（我用require.JS

我的看法型号：出现错误：不工作

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

我的控制器：

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

我的看法型号：工作完全正常

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

问题：如果我在底部使用return FirstSubViewModel而不是在渲染函数中返回this，那么一切正常。但我想在render function中尝试return this，并希望一切都能正常工作。最后我不想做return FirstSubViewModel。

FirstSubViewModel是不是构造

Answer 1

最后返回定义了将被包括在其他模块在这种情况下是必需的：使用“返回此”在渲染功能时

错误。没有这个模块，返回undefined。

让我们试着在控制台：

x = undefined 
new x() 

TypeError: x is not a constructor

return FirstSubViewModel是强制性的。建议使用渲染功能中的return this。

代码：

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