backbone.js의 콜렉션에보기 바인드

Question

본질적으로 백본입니다. 새 모델을 컬렉션에 추가하면 뷰가 업데이트되도록 컬렉션을 뷰에 바인딩하려고합니다. 모델을 사용하여이 작업을 수행 할 때 모델의 변경 이벤트에 바인딩 할 수 있다고 생각합니다. 그러나 컬렉션에서 어떻게 동일한 작업을 수행합니까?

App.Views.Hotels = Backbone.View.extend({ 

    tagName: 'ul', 

    render: function() { 
     this.collection.each(this.addOne, this); 
     var floorplanView = new App.Views.Floorplans({collection:floorplanCollection}); 
     $('.floorplans').html(floorplanView.render().el); 
     return this; 
    }, 

    events: {'click': 'addfloorplan'}, 

    addOne: function(hotel) { 
     var hotelView = new App.Views.Hotel ({model:hotel}); 
     this.$el.append(hotelView.render().el); 
    }, 

    addfloorplan: function() { 
     floorplanCollection.add({"name": "another floorplan"}); 
    } 
}); 

App.Collections.Floorplans = Backbone.Collection.extend({ 
    model: App.Models.Floorplan, 
    initialize: function() { 
     this.bind("add", function() {console.log("added");}); 
    } 
}); 

클릭 이벤트가 발생하여 컬렉션에 추가됩니다. 그러나 뷰를 업데이트하려면 어떻게해야합니까?

Answer 1

컬렉션의 add 이벤트를 청취 할 수 있습니다.이 은 컬렉션에 새 항목이 추가 될 때 발생합니다. 백본의 최신 버전에서는 이벤트 수신을 위해 방법이 bind 또는 on보다 선호됩니다. (Read de documentation for more info)

예를 들어, 귀하의 경우이 트릭해야한다 :이 도움이

App.Views.Hotels = Backbone.View.extend({ 

    initialize: function() { 
    this.listenTo(this.collection,'add', this.addOne); 
    }, 
    //rest of code 

희망을!

Answer 2

나는 오래 전에 지켜본 훌륭한 튜토리얼입니다.

An Intro to Backbone.js: Part 3 – Binding a Collection to a View

그것은 당신이 도넛의 컬렉션을 주어 졌을 때, 각 도넛에 대한 UpdatingDonutView을 렌더링하는 DonutCollectionView을 정의하는 데 도움이됩니다.