Backbone: Uncaught Type Error: .. is not a constructor
Backbone: Uncaught Type Error: .. is not a constructor
我正在学习 Backbone 和 JavaScript。我被困在一个错误中,这个错误可能与纯粹的 JavaScript 有关,而不是 Backbone.
在阅读 Backbone 教程(不使用 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
而不是在渲染函数中使用 return,一切正常。但我想在 render function
中尝试 return this
并希望一切正常。最后不想做return FirstSubViewModel
在渲染函数中使用“return this”时出错:
FirstSubViewModel
不是构造函数
最后一个 return 定义了将包含在其他模块中的内容,在这种情况下是必需的。没有这个模块 return 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.
});
我正在学习 Backbone 和 JavaScript。我被困在一个错误中,这个错误可能与纯粹的 JavaScript 有关,而不是 Backbone.
在阅读 Backbone 教程(不使用 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
而不是在渲染函数中使用 return,一切正常。但我想在 render function
中尝试 return this
并希望一切正常。最后不想做return FirstSubViewModel
在渲染函数中使用“return this”时出错:
FirstSubViewModel
不是构造函数
最后一个 return 定义了将包含在其他模块中的内容,在这种情况下是必需的。没有这个模块 return 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.
});