0

現在、ember cliプロジェクトを使用して ember アプリケーションをビルドしていますが、ナビゲーションを構成しようとして問題が発生しています。次のコード ブロックはインデックス ルーターで動作しますが、他のルーターで問題が発生しています。goToAnchor セクションを使用すると、ホームページのような単一の無限スクロールでページ内アンカー タグに移動できますが、他のビュー、つまり /terms ページに移動するときは、メニューをクリックしてホームページに戻ることができるようにする必要があります。ブラウザをリフレッシュします。

これは更新なしで可能ですか？

インデックス ルーター:

export default Ember.Route.extend({
    actions: {
        goToAnchor: function(item,anchor) {
            var $elem, $scrollTo;
            $elem = $('#' + anchor);
            $scrollTo = $('body').animate({
                scrollTop: $elem.offset().top-15
            }, parseInt(ENV.CONFIG.PRODUCT.SCROLL_SPEED));
            this.transitionTo(item.route).then($scrollTo);
        }
    }
});

ナビゲーション:

<section class="top-bar-section center">
    <ul class="nav-header">
        <li><a {{action goToAnchor 'index' 'menu1'}}>menu1</a></li>
        <li><a {{action goToAnchor 'index' 'menu2'}}>menu2</a></li>
        <li><a {{action goToAnchor 'index' 'menu3'}}>menu3</a></li>
        <li><a {{action goToAnchor 'index' 'menu4'}}>menu4</a></li>
    </ul>
</section>

この記事の時点での現在のセットアップ:

DEBUG: ------------------------------- 
DEBUG: Ember      : 1.5.1 
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba 
DEBUG: Handlebars : 1.3.0 
DEBUG: jQuery     : 2.1.1 
DEBUG: -------------------------------
4

1 に答える 1

1

こんにちは Chris 私はちょうどあなたのコードを調べたところ、落とし穴を特定することができました

  1. 利用規約ページのルートはlegal/touです。用語ページからナビゲーション メニューをクリックすると、legal/tou => applicationルート (子 => 親階層) を介してアクションがバブルされます。したがって、Nothing handled in the action goToAnchorがスローされました。したがって、最初のステップは、goToAnchorロジックをindexルートからルートに移動することapplicationです。

  2. 次に、goToAnchorテンプレートがレンダリングされる前に、アクションで DOM をクエリしようとしています。したがって、それは爆発します。テンプレートがレンダリングされた後、DOM を照会する必要があります。afterRenderEmber RunLoopのキューを利用する必要があります。Ember Runloops の詳細については、こちらのドキュメントを参照してください

    //routes/application.js

export default Ember.Route.extend({
actions: {
 goToAnchor: function(route,anchor) {
    var $elem, $scrollTo;
    this.transitionTo(route).then(function() {
      Em.run.schedule('afterRender', function(){
        $elem = $('#' + anchor);
        $('html,body').animate({
            scrollTop: $elem.offset().top-15
        }, 500);              
      });
    });
  }
 }
});
于 2014-05-26T17:32:58.080 に答える