5

おおよそ次のようなテンプレートがいくつかあります。

<template name="items">
  <div class="item-list">
    {{#each items}}
      {{> item}}
    {{/each}}
  <div>
  {{> loadMore}}
</template>

<template name="item">
  <div class="item" id="{{unique_string}}">
    <!-- stuff here -->
  </div>
</template>

<template name="loadMore">
  <a href="#">Load more...</a>
</template>

関連するJavaScriptを使用：

Template.items.items = function() {
  return Items.find({}, {limit: Session.get("itemCount")});
}

Template.loadMore.events({
  "click": function() {
    Session.set("itemCount", Session.get("itemCount") + 10);
  }
})

これらすべてが多かれ少なかれ一緒になって、無限のスクロールセクションのように機能するものを私に与えてくれます。（実際のコードにはさらにいくつかの可動部分がありますが、これは重要な部分です。）

ただし、クリックするたびにloadMore、より多くのデータがプルダウンされ、ページの先頭にスクロールして戻ります。無限スクロールの目的は無効になります。javascriptをスローして、本来あるべき場所までスクロールして戻すことはできますが、ページがすばやく飛び回るときに、厄介なちらつきが残ります。

preserveリスト全体と各アイテムで使用して、更新されないようにしようとしましdivたが、スクロールが停止するようには見えませんでした。私はまた{{#isolate}}、運がなくても、ほぼすべてのものにブロックを配置しようとしました。

再レンダリング中にページがスクロールしないようにするために、ここでできることはありますか？テンプレートの構成が異なりますか？私が見逃した、preserveまたはそれのいくつかの側面？{{#isolate}}

4

1 に答える 1

8

ページを上に <a href="#">Load more...</a>スクロールするため、ページは上にスクロールします。hrefが"＃"にリンクすると、ページは＃"elementid"のDOM要素にスクロールします。「＃」のみのリンクをクリックすると、上にスクロールします。

2つのオプションがあります。

  1. クリックイベントのデフォルトの動作を防止します（簡単なオプション）：

    Template.loadMore.events({
"click": function(event) {
  event.preventDefault();
  Session.set("itemCount", Session.get("itemCount") + 10);
}   })

    これにより、ページのリロードが停止します

  2. さらに良い方法：<a href="#">Load more...</a>リンクを作成する"#{{_id}}"と、ページは指定したIDの要素に自動的にスクロールします。これには、テンプレートの再構築と、最後のアイテムのIDを提供するためのテンプレートのヘルパーメソッドが必要になります。しかし、それはあなたのページをあなたが望む場所に正確にロードさせます。
于 2012-11-19T15:33:14.967 に答える