Backbone добавляет к списку, вместо того, чтобы его заменять

Question

Я создаю сайт с одной страницей с Wordpress и Backbone.js, у меня возникла проблема с получением новых данных. Он просто добавляет элементы DOM на контейнер el, а не заменяет их. Коллекция обновляется правильно, так как я вижу, что она имеет нужное количество элементов в консоли.

var PostItem = Backbone.Model.extend(); 

var PostItems = Backbone.Collection.extend({ 
    model: PostItem, 
    url: '/wp-admin/admin-ajax.php' 
}); 

var postItems = new PostItems(); 

var PostView = Backbone.View.extend({ /* Model View */ 
    tagName : 'article', 
    className : 'widget', 
    template : _.template($('#widgetPost').html()), 
    render: function(){ 
    var attributes = this.model.toJSON(); 
    this.$el.html(this.template(attributes)); 
    return this; 
    } 
}); 

var PostListView = Backbone.View.extend({ /* Collection View */ 
    el : '#content', 
    initialize: function(){ 
    this.collection.on('add', this.addOne, this); 
    this.collection.on('reset', this.addAll, this); 
    }, 
    addOne: function(postItem){ 
    var postView = new PostView({ model : postItem }); 
    this.$el.append(postView.render().el); 
    }, 
    addAll: function(){ 
    this.collection.forEach(this.addOne, this); 
    }, 
    render: function(){ 
    this.addAll(); 
    }, 
}); 

var postListView = new PostListView({ 
    collection : postItems 
}); 

$(function(){ 

    $('a#posts').click(function(){ 
    postItems.fetch({ 
     data: { 
     action: 'do_ajax', 
     fn: 'get_the_posts' 
     } 
    }); 
    return false; 
    }); 

    $('a#pages').click(function(){ 
    postItems.fetch({ 
     data: { 
     action: 'do_ajax', 
     fn: 'get_the_pages' 
     } 
    }); 
    return false; 
    }); 

}); 

Answer 1

Вам необходимо очистить свой коллекционный элемент $ el! :)

addAll: function(){ 
    this.$el.empty(); 
    this.collection.forEach(this.addOne, this); 
} 

Это должно сделать трюк.