백본

Question

의 컬렉션 모델을 렌더링 렌더링 템플릿에 정의 된 모든 책. 그러나 나는 페이지에 약간 붙어있는 것을 발견했다.

보기 재 렌더링으로 인한 것인지 확실하지 않습니다. 그림과 같이 books.fetch이 완료되면 books 컬렉션에 책을 추가하고 각 book 항목에 대해 add 이벤트가 발생하면 기존 항목을 제거하고 컬렉션을 반복하여 페이지를 다시 렌더링합니다.

한 번 책이 10 권이면 BookListView에 대해 1+2+3+4...+10 루프가 있음을 의미합니다.

나는 내 의견으로는 add 이벤트가 트리거되면, 나는 전체 목록을 새로 안 있었으나 결국 BookListView에 새보기를 추가,하지만 remove 이벤트에 대한, 그것은 보인다 어떻게 백본을 얻기 위해 내부 방법을 제공하지 않습니다 모델에서보기, 그래서 한번 제거 모델, 나는 관련보기를 얻을 수 없습니다.

어떻게 이런 종류의 옷을 취급합니까?

Answer 1

add을 render 기능에 바인딩하지 마십시오. 대신 전용 add 메소드를 작성하십시오.

var Book, BookList, BookListItemView, BookListView; 

Book = Backbone.Model.extend({}); 

BookList = Backbone.Collection.extend({ 
    model: Book, 
    url: "/books" 
}); 

BookListItemView = Backbone.View.extend({ 
    mtemplate: _.template($("#tpl_book_item").html()), 
    initialize: function() { 
    this.model.on("remove", this.remove); 
    }, 
    render: function() { 
    this.$el = $(this.mtemplate(this.model.toJSON())); 
    return this; 
    } 
}); 

BookListView = Backbone.View.extend({ 
    el: "#content", 
    initialize: function() { 
    this.listenTo(this.collection, "add", this.addItem); 
    }, 
    render: function() { 
    this.$el.empty(); 
    this.collection.each((function(item) { 
     this.addItem(item); 
    }), this); 
    return this; 
    }, 
    addItem: function(item) { 
    this.$el.append(new BookListItemView({ 
     model: item 
    }).render().$el); 
    } 
}); 

모델 자체의보기가 자체 제거 이벤트를 처리하게하십시오.