backbone.js: Cập nhật mô hình, sắp xếp lại và tái render bộ sưu tập mô hình

Question

Trong ứng dụng của tôi, tôi có kết nối socket.io đang nghe phần phụ trợ và cập nhật các mô hình do trình duyệt khách hàng nắm giữ (truy xuất mô hình theo id và gọi set trên thuộc tính mô hình).

Tôi muốn bộ sưu tập được sắp xếp, sau đó hiển thị lại toàn bộ để phản ánh bất kỳ thứ tự mới nào trên các mô hình là kết quả của set (hầu hết các ví dụ dường như xung quanh các chế độ xem riêng lẻ được hiển thị lại). Phương pháp đạt được điều này là gì?

NB Tôi đã có bố cục backbone.js nâng khá đúng nguyên văn từ ứng dụng ví dụ mẫu đơn (đây là ứng dụng xương sống đầu tiên).

Answer 1

Bạn có thể đạt được những gì bạn muốn bằng cách cung cấp phương thức comparator cho bộ sưu tập của bạn.

Ví dụ:

ModelCollection = Backbone.Collection.extend({ 
    comparator: function(a, b) { 
     if (a.get("name") > b.get("name")) return 1; 
     if (a.get("name") < b.get("name")) return -1; 
     if (a.get("name") === b.get("name")) return 0; 
    }, 

    initialize: function() { 
     this.on('change:name', function() { this.sort() }, this); 
    } 
}); 

Các comparator trong ví dụ này sẽ gây ra bộ sưu tập của bạn được sắp xếp theo thứ tự tăng dần của các name thuộc tính của các mô hình bên trong.

Lưu ý rằng bộ sưu tập của bạn sẽ không được sắp xếp tự động khi thay đổi (các) thuộc tính của bất kỳ số nào trong số models của nó. Theo mặc định, việc sắp xếp chỉ xảy ra khi tạo các mô hình mới và thêm chúng vào bộ sưu tập; nhưng comparatorsẽ được sử dụng theo phương pháp collection.sort.

Đoạn mã trên tận dụng điều này bằng cách đặt trình xử lý sự kiện chỉ cần sắp xếp lại bộ sưu tập trên bất kỳ change s thành thuộc tính models.

Để hoàn thành bức tranh, chúng tôi thiết lập một event listener thích hợp trong View kết hợp với bộ sưu tập để chắc chắn rằng nó lại làm cho trên bất kỳ thay đổi:

CollectionView = Backbone.View.extend({ 
    initialize: function() { 
     this.collection = new ModelCollection(); 
     this.collection.on('all', function() { this.render() }, this); 
    }, 

    render: function() { 
     this.$el.html(this.collection.toJSON()); 
    } 
}); 

Vậy là xong :)

---

Đoạn trích có liên quan từ Backbone documentation:

Theo mặc định, không có comparator cho bộ sưu tập. Nếu bạn xác định comparator, nó sẽ được sử dụng để duy trì bộ sưu tập theo thứ tự được sắp xếp. Điều này có nghĩa là khi các mô hình được thêm vào, chúng được chèn vào chỉ mục chính xác trong collection.models. Bộ so sánh có thể được định nghĩa là sortBy (chuyển một hàm lấy một đối số), dưới dạng sort (chuyển một hàm so sánh dự kiến ​​hai đối số) hoặc dưới dạng một chuỗi cho biết thuộc tính sắp xếp theo. [...] Bộ sưu tập với comparator sẽ không tự động sắp xếp lại nếu sau này bạn thay đổi thuộc tính mô hình, vì vậy bạn có thể gọi sort sau khi thay đổi các thuộc tính mô hình sẽ ảnh hưởng đến đơn đặt hàng.