Question

我正在尝试渲染一个简单的集合视图并遇到一个奇怪的问题。

问题是当我尝试在集合的视图中调用模型的render方法时，它找不到渲染方法。

我的模型和视图

var PersonModel = Backbone.Model.extend({});

var PersonView = Backbone.View.extend({
tagName : "person",
events:{
    "click h3":"alertStatus"

},
initialize:function(){
    this.model.on('change',this.render,this);

} ,
render:function(){

    var underscore_template = _.template('<h3>Name : <%= name %></h3>'+
        '<h3>Last Name : <%= surname %></h3>' +
        '<h3>Email : <%= email %> </h3>') ;

    console.log("Person View Render Oldu");
    this.$el.html(underscore_template(this.model.toJSON()));

},
alertStatus :function(e){
    alert("Clicked on Model View");
}
});

我的收藏和收藏视图

var PersonList = Backbone.Collection.extend({
model:PersonModel,
url:'/models'
});

var personList = new PersonList();

var PersonListView = Backbone.View.extend({
tagName : "personlist",
render : function(){
    this.collection.forEach(this.addOne,this);
},
addOne : function(personItem){
    var personView = new PersonView({model:personItem});
    this.$el.append(personView.render().el);  // The call to personView.render throws undefined
},
initialize : function(){
    this.collection.on('add',this.addOne,this);
    this.collection.on('reset',this.addAll,this);
},
addAll : function(){
    this.collection.forEach(this.addOne,this);
}
});

var personListView = new PersonListView({
collection:personList
});


personList.fetch({
success:function(){
    console.log("Fetch success");
}
});

我正在使用Jquery在文档上调用此JS，并将其添加到id为app的div中。

我的提取也很成功。当尝试调用personView.render（）时，问题仍然存在于Collection View的addOne函数中.el

任何帮助都将不胜感激。

Answer 1

您忘了在渲染中返回元素：

render : function() {

    var underscore_template = _.template('<h3>Name : <%= name %></h3>'+
        '<h3>Last Name : <%= surname %></h3>' +
        '<h3>Email : <%= email %> </h3>') ;

    console.log("Person View Render Oldu");
    this.$el.html(underscore_template(this.model.toJSON()));

    return this;  // chaining
}

否则您无法将其链接起来，之后您无法访问el。

Backbone Collection无法找到模型视图渲染

1 个答案: