BackboneJS: Tải thêm các mục vào bộ sưu tập

Question

Trong Backbone JS khi tôi tìm nạp bộ sưu tập, tôi có nên tìm nạp toàn bộ bộ sưu tập hoặc một phần nhỏ của bộ sưu tập không?

Ví dụ: tôi có bộ sưu tập nguồn cấp dữ liệu tin tức trong mongoDB có thể có 1000 mục. Khi người dùng truy cập trang, tôi chỉ muốn hiển thị cho họ 10 mục mới nhất có tùy chọn 'Tải thêm'. Nhưng nếu họ truy cập một mục cụ thể qua URL http://site.com/#/feed/:itemID Tôi muốn có thể lấy được bản ghi của mục đó.

1. Ban đầu tôi nên tìm nạp bao nhiêu tài liệu?

2. Làm cách nào để tìm nạp bất kỳ mục nào theo id?

Answer 1

1 - Bạn nên lấy 10

Thêm một đối số trang vào bộ sưu tập của bạn và có mã phụ trợ trả lại phù hợp với trang (10/trang). ?/My_objects page = 2 để có được hồ sơ 10-20, vv

Bạn làm điều này như thế này (chưa được kiểm tra):

collection.fetch({data: {page:2}}) 

Hoặc bạn thay đổi URL trực tiếp

2 - Để lấy một mục bởi ID bạn tạo mô hình

object = new Model({id: 1}) 

và lấy nó

object.fetch() 

Answer 2

Bạn có thể không muốn chỉ sử dụng Collection.fetch(), vì bạn sẽ không nhận được lợi ích của bộ nhớ đệm phía máy khách - nó sẽ thả các mục bạn đã tải từ máy chủ và đặt lại bộ sưu tập. Bạn có thể sẽ cần phải mở rộng Backbone.Collection bằng chức năng tùy chỉnh để truy xuất thêm các mục. Tôi sử dụng đoạn mã sau vào một dự án gần đây:

Backbone.Collection.extend({ 

    // fetch list without overwriting existing objects (copied from fetch()) 
    fetchNew: function(options) { 
     options = options || {}; 
     var collection = this, 
      success = options.success; 
     options.success = function(resp, status, xhr) { 
      _(collection.parse(resp, xhr)).each(function(item) { 
       if (!collection.get(item.id)) { 
        collection.add(item, {silent:true}); 
       } 
      }); 
      if (!options.silent) collection.trigger('reset', collection, options); 
      if (success) success(collection, resp); 
     }; 
     return (this.sync || Backbone.sync).call(this, 'read', this, options); 
    } 

}); 

này được chủ yếu là sao chép từ các mã mặc định fetch(), nhưng thay vì thả các mục hiện nó sẽ thêm những cái mới. Bạn có thể muốn triển khai thứ gì đó phía máy chủ, sử dụng đối tượng options là Julien đề xuất chuyển các tham số của mục bạn muốn tải, có thể là số trang (nếu bạn muốn kiểm soát kích thước trang trên máy chủ) hoặc một cặp khởi động (nếu bạn muốn kiểm soát nó trên máy khách).

Answer 3

Tôi đã sử dụng câu lệnh {add: true} khi gọi tìm nạp trên bộ sưu tập của mình. Điều này ngăn không cho bộ sưu tập được thay thế bằng kết quả tìm nạp mà thay vào đó sẽ thêm kết quả vào bộ sưu tập. Sau đó, tôi cũng đã chuyển số tiền 'bỏ qua' bằng cách sử dụng {data: {skip: amountOfItemsInCollectionAlready }, điều này được sử dụng ở phía máy chủ để nhận lô hàng chính xác từ cơ sở dữ liệu.

lấy phương pháp cuối cùng của tôi trông như thế này:.

loadMore: function(e){ 

     this.collection.fetch({ 
      add: true,// this adds to collection instead of replacing 
      data:{// this is optional params to be sent with request 
       skip: this.collection.length// skip the number of items already in the collection 
      } 
     }); 
    }