Chèn một mục vào bộ sưu tập backbone.js

Question

Có cách nào đơn giản để chèn một mục mô hình mới vào giữa một backbone.js Collection và sau đó cập nhật bộ sưu tập của View để bao gồm mục mới ở đúng vị trí không?

Tôi đang làm việc trên một điều khiển để thêm/xóa các mục khỏi danh sách. Mỗi mục danh sách có Model và View riêng của mình và tôi cũng có một số View cho toàn bộ bộ sưu tập.

Mỗi chế độ xem mục có nút Duplicate sao chép mô hình của mục và chèn vào bộ sưu tập ở vị trí chỉ mục bên dưới mục được nhấp.

Chèn mục vào bộ sưu tập rất đơn giản, nhưng tôi đang gặp khó khăn trong việc tìm cách cập nhật chế độ xem bộ sưu tập. Tôi đã thử một cái gì đó như thế này:

ListView = Backbone.View.extend({ 
    el: '#list-rows', 
    initialize: function() { 
     _.bindAll(this); 
     this.collection = new Items(); 
     this.collection.bind('add', this.addItem); 
     this.render(); 
    }, 
    render: function() { 
     this.collection.each(this.addItems); 
     return this; 
    }, 
    addItem: function (item) { 
     var itemView = new ItemView({ model: item }), 
      rendered = itemView.render().el, 
      index = this.collection.indexOf(item), 
      rows = $('.item-row'); 

     if (rows.length > 1) { 
     $(rows[index - 1]).after(rendered); 
     } else { 
     this.$el.append(rendered); 
     } 
    } 
} 

Triển khai này hoạt động nhưng tôi gặp phải lỗi lạ khi thêm một mục mới. Tôi chắc chắn rằng tôi có thể sắp xếp những người đó, nhưng ...

Có một giọng nói trong đầu tôi nói với tôi rằng có một cách tốt hơn để làm điều này. Có phải tự tìm ra nơi để chèn một ItemView mới có vẻ thực sự hacky - không nên xem bộ sưu tập biết làm thế nào để rerender bộ sưu tập đã?

Mọi đề xuất?

Answer 1

Cách thông thường tôi đang làm là để ListView hiển thị mỗi ItemView trong chức năng render. Sau đó, tôi chỉ ràng buộc các sự kiện add đến render chức năng, như thế này:

ListView = Backbone.View.extend({ 
    el: '#list-rows' 
    , initialize: function() { 
    _.bindAll(this); 
    this.collection = new Items(); 
    this.collection.bind('add', this.render); 
    this.render(); 
    } 
    , render: function() { 
    this.$el.empty(); 
    var self = this; 
    this.collection.each(function(item) { 
     self.$el.append(new ItemView({ model: item }).render().el); 
    }); 
    return this; 
    } 
} 

Mỗi lần bạn gọi this.collection.add(someModel, {at: index}), quan điểm sẽ được tái rendered cho phù hợp.

Answer 2

Tôi không nghĩ rằng việc hiển thị lại toàn bộ bộ sưu tập khi thêm phần tử mới là giải pháp tốt nhất. Nó chậm hơn chèn mục mới ở đúng vị trí, đặc biệt nếu danh sách dài.

Ngoài ra, hãy xem xét kịch bản sau đây. Bạn tải một vài mục trong bộ sưu tập của mình và sau đó bạn thêm n mục khác (giả sử người dùng nhấp vào nút "tải thêm"). Để thực hiện điều này, bạn sẽ gọi phương thức fetch() qua add: true làm một trong các tùy chọn. Khi dữ liệu được nhận lại từ máy chủ, sự kiện 'thêm' được kích hoạt n lần và bạn sẽ kết thúc lại hiển thị danh sách của mình n lần.

Tôi đang thực sự sử dụng một biến thể của mã trong câu hỏi của bạn, đây là callback của tôi vào sự kiện 'thêm':

var view, prev, prev_index; 
view = new ItemView({ model: new_item }).render().el; 
prev_index = self.model.indexOf(new_item) - 1; 
prev = self.$el.find('li:eq(' + prev_index + ')'); 
if (prev.length > 0) { 
    prev.after(view); 
} else { 
    self.$el.prepend(view); 
} 

Vì vậy, về cơ bản tôi chỉ sử dụng jQuery selector :eq() thay vì nhận được tất cả các yếu tố như bạn làm, nên sử dụng ít bộ nhớ hơn.