从另一个视图中渲染视图时,出现JS错误“未捕获的ReferenceError:未定义模型”。
我有一个列表视图:
define([
'jquery',
'backbone',
'underscore',
'views/action',
'collections/actionlist',
'text!templates/actionlist.html'],
function($, Backbone, _, actionView, actionList, template){
var someactions = [
{ the_action: "Contact 1", due: "1, a street, a town, a city, AB12 3CD", list: "0123456789" },
{ the_action: "Contact 2", due: "1, a street, a town, a city, AB12 3CD", list: "0123456789" },
{ the_action: "Contact 3", due: "1, a street, a town, a city, AB12 3CD", list: "0123456789" }
];
var actionlistView = Backbone.View.extend({
el: '#main',
template: _.template(template),
initialize: function () {
this.collection = new actionList(someactions);
this.collection.on("add", this.renderAction, this);
},
events: {
"click #add": "addAction"
},
render: function () {
var $el = $('#main')
$el.html(this.template);
// Get Actions
_.each(this.collection.models, function (action) {
this.renderAction(action);
}, this);
},
renderAction: function (action) {
var theAction = new actionView({ model: action });
$('#actionlist').append(theAction.render().el);
},
addAction: function(e){
e.preventDefault();
var formData = {};
$('#addAction').children("input").each(function(i, el){
if ($(el).val() !== "") {
formData[el.id] = $(el).val();
}
});
this.collection.create(formData);
}
});
return actionlistView;
});
在renderAction函数中调用的actionView为:
define([
'jquery',
'backbone',
'underscore',
'models/action',
'text!templates/action.html'],
function($, Backbone, _, actionModel, template){
var actionView = Backbone.View.extend({
tagname: 'li',
template: _.template(template),
render: function () {
this.$el.html(this.template(this.model)); // ERROR OCCURS ON THIS LINE
return this;
}
});
return actionView;
});
我在“ this。$ el.html(this.template(this.model));”行上收到错误。尝试呈现第一个actionView时。
我很沮丧!我想念什么?
根据要求的ActionView模板:
<b class="name"><%=model.get("the_action")%></b> - <%=model.get("due")%> -
<em>from <%=model.get("list")%></em>
最佳答案
最好在模板中调用model.toJSON()并在模板中引用json。
由此:
this.$el.html(this.template(this.model));
对此:
this.$el.html(this.template(this.model.toJSON()));
然后直接在模板中引用“ due”和“ list”:
<b class="name"><%=the_action%></b> - <%=due%> -
<em>from <%=list%></em>