Backbone.js 使用新模型重新渲染主干视图

基本上，我希望呈现集合中标题的随机列表，然后每当用户触发“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();
        }
    });

使用Jquery的empty（）方法，如中所述

---

只需替换视图元素的html，而不是追加

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

---

只要我先插入StoryListView模板，然后附加/前置StoryListItem视图，这也可以。否则.html（）将清除StoryListItem html。我选择这个答案是因为它比我的解决方案少了一步。谢谢

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