làm thế nào bạn sẽ xây dựng Pinterest như trang với meteor.js

Question

Tôi hy vọng tất cả các bạn biết cách bố trí theo phong cách Pinterest và hành vi của nó:

• chúng tôi có bộ sưu tập của nhiều (giả sử 1000) sản phẩm
• trên trang chúng tôi chỉ hiển thị ít tập hợp con của bộ sưu tập đó (tức là 20 sản phẩm đầu tiên)
• khi người dùng cuộn xuống và tiếp cận cuối trang, chúng tôi hiển thị 20 sản phẩm tiếp theo
• trang này. các sản phẩm được hiển thị

thưởng nhiệm vụ:

• khi bộ sưu tập Sản phẩm được mặt hàng mới, chúng được hiển thị trên đầu trang (như mục đầu tiên trong danh sách các sản phẩm hiển thị)

Tôi đang nghĩ đến làm thế nào để chương trình logic đó theo cách Meteor. Hãy bỏ qua mã giao diện người dùng, tôi chỉ quan tâm đến logic nghiệp vụ.

Tôi đang nghĩ về bộ sưu tập ProductsDisplayed như helper, mà là trống và dân cư của 20 sản phẩm trên tải trang, sau đó khi điểm di chuyển được đạt tới, tôi chèn 20 sản phẩm hơn từ bộ sưu tập sản phẩm gốc, vv

vấn đề:

• làm thế nào để có bộ sưu tập ProductsDisplayed khác nhau giữa khách hàng,
• làm thế nào để yêu cầu 20 sản phẩm tiếp theo từ bộ sưu tập sản phẩm, và không nhận được những cái trước

Nhưng có thể toàn bộ ý tưởng về Sản phẩm được hiển thị không đúng. Tôi rất muốn biết bạn nghĩ gì!

Cập nhật!
Tôi đã thay đổi cách tiếp cận chỉ sử dụng Bộ sưu tập sản phẩm.

server:

Meteor.publish "productsDisplayed", (number) -> 
    Products.find {}, 
    limit: number 

khách hàng:

Meteor.autosubscribe -> 
    Meteor.subscribe "productsDisplayed", Session.get('productsDisplayedNumber') 

và incrementing 20 phiên 'productsDisplayedNumber' khi di chuyển điểm đạt được. Nhưng tự động đăng ký làm cho toàn bộ khuôn mẫu được hiển thị lại, không chỉ các phần tử mới. Bất kỳ ý tưởng nào?

Answer 1

Cuối cùng tôi đã giải quyết được sự cố này. Giải pháp là phải có khách hàng chỉ Collection, như thế:

# on client 
# client side only collection 
ProductsDisplayed = new Meteor.Collection(null) 

sau đó khi di chuyển điểm đạt được hỏi máy chủ cho N tiếp theo (limitNo) sản phẩm

# on client 
Meteor.call 'getProducts', limitNo, skipNo, (err, products) => 

    _.each products, (item, index) => 
    # get rid of _id 
    delete item._id 

    ProductsDisplayed.insert(item) 

skipNo được tăng lên bởi N, luôn luôn hỏi cho tập hợp dữ liệu tiếp theo.Và ở phía máy chủ, tôi có:

# on server 
Meteor.methods 
    getProducts: (limitNo, skipNo) -> 

    productsCursor = Products.find({}, { 
     limit: limitNo, 
     skip: skipNo 
    }) 

    productsCursor.fetch() 

phương pháp Meteor này trả về bộ sản phẩm tiếp theo từ Bộ sưu tập sản phẩm.

Tất nhiên xem mẫu màn ProductsDisplayed nội dung bộ sưu tập:

Template.products.products = -> 
    ProductsDisplayed.find {} 

Vì vậy, bạn nghĩ gì?