2

iScroll (v5) を Meteor で動作させるのに問題があります。問題なくパッケージをインストールしましたが、ドキュメントがロードされたときに iScroll を呼び出すのは少し面倒です。

Meteor は、iScroll デモのようにボディのオンロードをサポートしていないため、次のことを試しました。

if (Meteor.isClient) {
  Meteor.startup(function () {
    var myScroll;
myScroll = new IScroll('#wrapper', { mouseWheel: true });
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
});

}

私のmain.jsファイルで。

これは、ページを更新した後にのみ機能するようで、新しいページに移動しても実行されません。

また、アプリケーションのメイン ページの Template.rendered 関数に初期化コードを追加しようとしました。繰り返しますが、時々うまくいくようですが、他の人ではうまくいきませんか??

私が初心者でしたら申し訳ありませんが、Meteors テンプレートのレンダリングは理解するのが難しいことが証明されています。

誰でも提供できるヘルプは非常に高く評価されます!!!

スティーブン

4

1 に答える 1

4

Meteor のリアクティブ レンダリングが iScroll によって作成された DOM ノードを破棄しないことを確認し、破棄されて再作成されたときに iScroll を再インスタンス化する必要があります。また、スクローラー内の DOM を変更するたびに iScroll.refresh() を呼び出して、その寸法を更新する必要があります。

例を見てみましょう - スクロールしたいコレクションを持つテンプレートがあるとします:

<template name="myCollectionView">
  <div class="my_collection">
    <div class="scroller"> 
      {{#isolate}}
        {{#each items}}
          {{> item}}
        {{/each}}
      {{/isolate}}
    </div>
  </div>
</template>

コレクションを div で二重にラップする必要があることに注意してください。my_collectioniScroll に渡すための外側の divと、 scrolleriScroll の JS によって実際に移動される単一の内部 div。

#isolateの周りのブロックにも注意してください。itemsこれは、コレクションが変更されたときに、外部 DOM (ラッパー ノードとスクローラー ノード) が置き換えられないように、そのブロックの外側に再レンダリングを伝播しないように Meteor に指示します。

次に、iScroll を初期化し、適切な簿記を追加して、Meteor の反応性によって DOM が変更されたときに実行し続けるようにしましょう。

var scroller; // file-scope instance of iScroll that we will update appropriately
...
Template.myCollectionView.rendered = function () {
  var scrollNode = this.find('.scroller');
  // let's figure out if iScroll is already running by checking whether 
  // it's DOM nodes are still intact. 
  if (scrollNode.style.webkitTransform == "") {
    // either first time rendering, or someone replaced our DOM nodes. 
    // Re-instantiate iScroll.
     scroller = new iScroll(this.find('.my_collection'));
  } else {
    // DOM is still intact, just tell iScroll to update its size
    // You need to do this in a setTimeout to make sure DOM changes
    // have already been rendered (this affects size computations)
    Meteor.setTimeout(function () { scroller.refresh(); }, 0);
  }
}

overflow: hidden;ラッパー div (つまり ) の CSSが設定されていることを確認してください.my_collection。

于 2013-11-22T22:32:33.703 に答える