javascript - Backbone : Collection nested in a model

Question

我会列出一些代码并解释情况。
(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({...})

Answer 1

我建议你移动这一行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() 但我认为您可以关注我从这里开始。