백본이 목록보기를 바꾸는 대신 추가합니다.

Question

Wordpress 및 Backbone.js를 사용하여 단일 페이지 웹 사이트를 제작하고 있습니다. 새 데이터를 가져올 때 문제가 생겼습니다. 컨테이너 요소를 대체하는 대신 DOM 요소를 컨테이너 엘에 추가하기 만하면됩니다. 컬렉션에 올바르게 업데이트됩니다. 콘솔에 올바른 요소가 있음을 알 수 있습니다.

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

collectionView의 $ el을 지워야합니다. :)

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

이

트릭을 할해야합니다.