backbone.js: thêm một yếu tố để một bộ sưu tập mà không cần render tất cả các bộ sưu tập

Question

tôi có một cái nhìn mà làm cho bản thân từ một Bộ sưu tập:

render: function() { 

    $(this.el).html(JST['templates/menu']({collection: this.collection })); 
    $('#nav').html(this.el);  
} 

Trong giao diện khởi tạo, tôi ràng buộc sự kiện thêm của bộ sưu tập về chức năng hiển thị của chế độ xem:

initialize: function() { 
    this.render(); 
    var self = this; 
    this.collection.bind("add", function(event){ 
     self.render(); 
    }); 
} 

ở nơi khác trong ứng dụng, tôi thêm một mục vào bộ sưu tập.

bookSubscription_collection.add(model); 

Vấn đề với mã được, nếu tôi thêm một mục mới vào bộ sưu tập, sau đó tất cả các mục trong bộ sưu tập được tái-rendered.

Có cách nào để thêm mục mới vào bộ sưu tập mà không trả lại tất cả các mục khác nhưng chỉ hiển thị mục mới?

Answer 1

Thay vì ràng buộc sự kiện thêm của bộ sưu tập vào hàm kết xuất, hãy liên kết nó với một số hàm khác chấp nhận mô hình được thêm vào và sửa đổi DOM với dữ liệu từ mô hình được thêm vào.

Answer 2

Đây là phiên bản đơn giản về cách tôi đang thực hiện. reset thêm tất cả các mô hình vào giao diện người dùng và add thêm một mô hình duy nhất vào giao diện người dùng. addAll về cơ bản có một vòng lặp gọi là addOne cho mỗi mô hình. Nó có lẽ có thể được tối ưu hóa tốt hơn nhưng nó hoạt động đủ tốt.

initialize: function() { 
    _.bindAll(this, 'render', 'addOne', 'addAll'); 

    leads.bind('add', this.addOne, this); 
    leads.bind('reset', this.addAll, this); 
    }, 
    render: function() { 
    this.addAll(); 
    return this; 
    }, 
    addOne: function(model) { 
    // add the model to HTML 
    }, 
    addAll: function(options) { 
    leads.each(this.addOne); 
    return this; 
    } 

Answer 3

abraham đã viết một ví dụ điển hình. Ive cũng đã sử dụng nó như thế này

initialize: ->  
    self = @ 
    @model.bind "add", (task) -> 
    $(self.el).append new app.TaskIndexItemView(model: task).render().el 

nhưng tôi nghĩ rằng addOne là giải pháp tốt hơn