我会列出一些代码并解释情况。
(1) 我实例化了 App.views.tasks
。在此 View 的 initialize
函数中,我获取任务。
(2) 在 render
函数中,我为每个任务实例化一个 App.views.task
。
(3) 在 App.views.task
的 initialize
函数中,我实例化了一个 App.views.comments
我将注释集合和对 DOM
元素(任务在其中呈现)的引用传递给它。
(4) App.views.comments
启动任务评论的获取。
问题:
如果没有由获取
评论。
如果我在 render
函数中传递引用 el
,一切都会好起来的,但这也意味着 App.views.comments
会在每次实例化调用 render 的时间,这不太好。所以这只是一种幸运的方法,只有因为存在抓取
,它才有机会定义它,否则它将是未定义
。
我添加了一些注释来解释发生的情况,您可以在 App.views.task 和 App.views.comments 中找到它们。
解决某些情况下可能出现的问题的最佳方法是什么?
App.collections.Tasks = Backbone.Collection.extend({
model: App.models.Task,
url: App.baseHrefReq + '/tasks/all'
});
App.models.Task = Backbone.Model.extend({
initialize: function() {
this.set({comments: new App.collections.taskComments});
this.get('comments').url = App.baseHrefReq + '/comments/get/task-id/' + this.get('id');
}
});
App.views.tasks = Backbone.View.extend({
initialize: function() {
App.iCollections.Tasks = new App.collections.Tasks;
App.iCollections.Tasks.bind('reset', this.render, this);
App.iCollections.Tasks.bind('add', this.renderTask, this);
App.iCollections.Tasks.fetch();
},
render: function() {
$('.feed-list').html('');
App.iCollections.Tasks.each(this.renderTask);
},
renderTask: function(task) {
var view = new App.views.task({model: task});
$('.feed-list').append(view.render().el);
}
});
App.iViews.tasks = new App.views.tasks;
App.views.task = Backbone.View.extend({
tagName: 'li',
template: _.template($('#task-item-template').html()),
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
this.model.get('comments').bind('reset', this.render, this);
this.model.get('comments').bind('add', this.render, this);
this.model.get('comments').bind('remove', this.render, this);
//I pass the DOM reference here
this.commentsView = new App.views.comments({collection: this.model.get('comments'), el: this.$el});
},
render: function() {
var modelJSON = this.model.toJSON();
//the DOM reference is only ready and defined here
this.$el.html(this.template(modelJSON));
return this;
}
});
App.views.comments = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render', 'renderComment');
this.collection.bind('reset', this.render, this);
this.collection.bind('add', this.renderComment, this);
this.collection.bind('remove', this.remove, this);
this.collection.fetch();
},
render: function() {
//if there wasn't the fetch() above, $el would be undefined at this point
this.$el.find('.feed-comments ul').html('');
this.collection.each(this.renderComment);
},
renderComment: function(comment) {
var view = new App.views.comment({model: comment});
this.$el.find('.feed-comments ul').append(view.render().el);
}
});
});
App.views.comment = Backbone.View.extend({...})
最佳答案
我建议你移动这一行this.commentsView = new App.views.comments({collection: this.model.get('comments'), el: this.$el});
到 App.views.task.render()
的末尾。
事实上,这一行是渲染行为的一部分,因此这是更好的位置。
这样做你也可以这样做:
this.commentsView = new App.views.comments({collection: this.model.get('comments'), el: this.$el.find('.feed-comments ul')});
我认为它要求什么。
您应该在 App.views.task.render()
中执行更多操作,例如调用 this.commentsView.render()
但我认为您可以关注我从这里开始。
关于javascript - Backbone : Collection nested in a model,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12019822/