Backbone.js 콜렉션 뷰가 단일 트리거를 위해 여러 번 렌더됩니다.

Question

backbone.js 콜렉션 및 콜렉션 뷰가 있습니다. 그것의 컬렉션을 듣고 컬렉션보기 add 이벤트. 그러나 새 모델을 컬렉션에 추가하면 각 모델마다 여러 번 렌더링됩니다. JSFiddle

var ImageCollectioView = Backbone.View.extend({ 

    initialize: function() { 
    this.collection.bind('add', this.render, this); 
    }, 

    collection: imgColection, 
    el: '#cont', 
    render: function() { 
    var els = [], self = this; 
    this.collection.each(function(image){ 
     var imageView = new ImageView({model: image}); 
     self.$el.append(imageView.render().el); 
    }); 

    return this; 
    } 
}); 

Answer 1

귀하의 render 방법은 전체 컬렉션을 렌더링 확인하시기 바랍니다. 모델을 추가 한 후 기존 항목보기 지워야합니다 그래서 :

var ImageCollectioView = Backbone.View.extend({ 
    initialize: function() { 
    this.render(); 
    this.listenTo(this.collection, 'add', this.renderItem); 
    }, 
    el: '#cont', 
    render: function() { 
    this.collection.each(this.renderItem, this); 
    return this; 
    }, 
    renderItem: function(image) { 
    var imageView = new ImageView({ 
     model: image 
    }); 
    this.$el.append(imageView.el); 
    } 
}); 

: 말했다되고 그건

render: function() { 
    var els = [], self = this; 
    this.$el.empty(); 
    //------^---- clear existing 
    this.collection.each(function(image){ 
     var imageView = new ImageView({model: image}); 
     self.$el.append(imageView.render().el); 
    }); 

    return this; 
} 

을, 단지 전체 컬렉션을 렌더링하는 것보다 단일 항목보기를 오히려 추가 별도의 메소드를 추가하는 것이 좋습니다

Updated Fiddle