8

pinterest スタイルのレイアウトとその動作を皆さんが知っていることを願っています。

  • 多くの（1000としましょう）製品のコレクションがあります
  • ページの読み込み時に、そのコレクションのごく一部のみを表示します (つまり、最初の 20 個の製品)
  • ユーザーが下にスクロールしてページの一番下に到達すると、次の 20 個の製品をレンダリングします
  • ページは多くのクライアントによって表示され、それぞれに独自の一連の製品が表示されます

ボーナスタスク:

  • Products コレクションが新しいアイテムを取得すると、ページの上部に表示されます (表示された製品リストの最初のアイテムとして)。

そのロジックを Meteor のようにプログラムする方法を考えています。ユーザー インターフェイスのコードは飛ばしましょう。私はビジネス ロジックだけに関心があります。

ProductsDisplayed コレクションをヘルパーとして考えています。これは空で、ページの読み込み時に 20 個の製品が読み込まれます。スクロール ポイントに到達すると、元の Products コレクションなどからさらに 20 個の製品を挿入します。

問題:

  • クライアント間で異なる ProductsDisplayed コレクションを持つ方法、
  • Products コレクションから次の 20 個の製品を要求し、前の製品を取得しない方法

しかし、おそらく ProductsDisplayed に関する全体的な考えは間違っています。私はあなたがどう思うか知りたいです！

アップデート！
Products コレクションのみを使用するようにアプローチを変更しました。

サーバ：

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

クライアント：

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

スクロール ポイントに到達すると、セッション「productsDisplayedNumber」が 20 ずつ増加します。ただし、autosubscribe を使用すると、新しい要素だけでなく、テンプレート全体が再レンダリングされます。何か案は？

4

1 に答える 1

5

私はついにこの問題を解決しました。解決策は、次のようにクライアントのみのコレクションを持つことです。

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

スクロール ポイントに到達したら、サーバーに次の N ( limitNo) 個の製品を要求します。

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

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

    ProductsDisplayed.insert( item )

skipNo常に次のデータセットを要求するために、N ずつインクリメントされます。そしてサーバー側には次のものがあります：

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

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

    productsCursor.fetch()

この Meteor メソッドは、Products コレクションから次の製品セットを返します。

もちろん、ビュー テンプレートには ProductsDisplayed コレクションのコンテンツが表示されます。

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

それで、あなたはどう思いますか？

于 2013-02-07T16:16:11.713 に答える