1

我将列出一些代码并解释情况。
(1)我实例化App.views.tasks. 在initialize此视图的功能中，我获取任务。
(2)从函数中，我为每个任务render实例化一个。(3)在 的函数中，我实例化 an并将注释集合和对渲染任务的元素的引用传递给它。(4)踢任务评论的获取。 App.views.task
initializeApp.views.taskApp.views.commentsDOM
App.views.comments

问题：如果没有评论引起的延迟，我传递给的元素
的引用将是。如果我在函数中 传递了引用，一切都会好起来的，但这也意味着每次调用时都会实例化，这是不好的。所以这只是一种幸运的方法，它只有机会定义它，因为有 a ，否则它会是。 我添加了一些注释来解释发生了什么，您可以在和中找到它们。 DOMApp.views.commentsundefinedfetching
elrenderApp.views.commentsrenderfetchingundefined
App.views.taskApp.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({...})
4

1 回答 1

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()但我认为你可以从这里关注我。

于 2012-08-19T11:38:25.457 回答