主干:嵌套在模型中的集合

Question

我会列出一些代码并解释一下情况。

(1) i实例化App.views.tasks。在这个视图的initialize函数中，我获取任务。

(2)从render函数开始，为每个任务实例化一个App.views.task。

(3)在App.views.task的initialize函数中，我实例化了一个App.views.comments，并将注释的集合和对任务呈现的DOM元素的引用传递给它。

(4) App.views.comments启动任务注释的提取。

问题

如果不存在注释的DOM延迟，那么我传递给App.views.comments的对fetching元素的引用将是undefined。

如果我在render函数中传递了引用render，那么一切都会很好，但这也意味着每次调用render时都会实例化App.views.comments，这不是很好。因此，这只是一种幸运的方式，它只有机会进行定义，因为有一个fetching，否则它将是undefined。

我添加了一些注释来解释发生了什么，您可以在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')});

我认为这是在要求什么。

您应该做更多的事情，比如在this.commentsView.render()中调用App.views.task.render()，但是我认为您可以从这里开始跟踪我。