Question

基本上，我想从集合中呈现标题的随机列表，然后在用户触发“loadMore”标题事件时，使用不同的标题集重新呈现列表。

我有一个StoryList视图，为我的集合中的每个模型添加一个新的StoryListItem视图。我还使用下划线方法sample（）来随机化和限制模型的数量，从而限制渲染的StoryListItem视图的数量。最后，我将一个事件委托给这个名为“loadMore”的视图。我希望loadMore事件使用与原始集合不同的样本重新呈现视图。

目前，loadMore事件基本上重建了原始集合（采样模型包含属性“models”，其中包含我们最初采样的所有模型），然后重新呈现视图。结果是在原始视图元素之后附加的第二个视图元素。我只是知道我没有以正确的方式解决这个问题，我希望有人能让我走上正轨。

sbk.StoryListView = Backbone.View.extend({
        tagName: 'ul',
        id: 'story-list',
        initialize: function () {
            this.collection.on('reset', this.render, this);
            console.log('initialize');
        },
        template: Handlebars.compile($('#story-list-template').html()),
        render: function () {
            var newCollection = _.sample(this.collection.models, 4);
            _.each(newCollection, function (storyItem) {
                $(this.el).append(new sbk.StoryListItemView({model: storyItem}).render().el);
            }, this);

            $(this.el).append(this.template());
            return this;
        },
        events: {
            'click #load-more' : 'loadMore'
        },
        loadMore: function(){
            this.collection = new Backbone.Collection(this.collection.models);
            this.render();
        }
    });

Answer 1

按照this stackoverflow question中的回答，使用Jquery的empty（）方法。

loadMore: function(){
        this.collection = new Backbone.Collection(this.collection.models);
        this.$el.empty();
        this.render();
}

Answer 2

不要追加，只需替换视图元素的html。

this.$el.html(this.template())

使用新模型重新渲染Backbone视图

2 个答案: