0

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

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

我的模型和视图

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 中。

我的 fetch 也成功了。在尝试调用 personView.render().el 时，Collection View 的 addOne 函数仍然存在问题

任何帮助，将不胜感激。

4

1 回答 1

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以后也不能访问。

于 2012-12-23T13:16:52.987 回答