0

Foundation 5 を ember アプリケーションに結合しようとしていますが、topbarjs を使用するナビゲーションで新しい問題が発生しています。デスクトップからアプリケーションを表示すると、すべてがうまく機能しますが、Chrome 開発コンソールを展開してデザインを強制的にレスポンシブ モードにすると、ハンバーガー メニューがこのメッセージをトリガーします。

コンソール エラー メッセージは次のとおりです。

キャッチされていない TypeError: 未定義のプロパティ 'scrolltop' を読み取ることができません

この問題は、次のコード リポジトリで再現できます: chrishough/embercli-emberjs-stackoverflow

私の仮定では、例のナビの # 記号と関係があると思います:

<nav class="top-bar" data-topbar data-options="scrolltop:false;is_hover:true;">
    <ul class="title-area">
        <li class="name">
            TEST
        </li>
        <li class="toggle-topbar menu-icon">
            <a href="#"></a>
        </li>
    </ul>
    <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>
            <li><a {{action goToAnchor 'index' 'menu5'}}>menu5</a></li>
        </ul>
    </section>
</nav>

私はember cliプロジェクトを使用して、ember アプリケーションを構築しています。

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

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

2

これにはしばらく時間がかかりましたが、テンプレートがレンダリングされた後に実行されるコードのセグメントを抽出する方法を概説したいくつかの堅実な投稿Ember-JS-After-Render-Eventと coderwall の例に出くわしました。これをさらに一歩進めると、幸運なことに、これら 2 つのスレッドFoundation issue 1840とfoundation issue 3206が、abide ライブラリが適切にロードされないことを訴えていたことがわかりました。ビンゴ！それが問題でした。これが私がそれを解決した方法です。

app/external/view-reopen.jsまず、次のコードを 使用して中央ファイルを作成します。

export default Ember.View.reopen({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },
  afterRenderEvent : function(){
    // Implement this hook in your own subclasses and run your jQuery logic there.
    // Do not add code here as this fires after EVERY didInsertElement event
  }
});

そのビューをファイル内のアプリケーション ローダー プロセスにフックするよりも、次のapp.jsようにします。

import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import View from './external/view-reopen';

Ember.MODEL_FACTORY_INJECTIONS = true;

var App = Ember.Application.extend({
  modulePrefix: 'frontend',
  Resolver: Resolver
});

loadInitializers(App, 'frontend');

export default App;

そして、最後の部分ですが、かなり汚れていると思います。結局のところ、従来のクライアント サーバー アプリケーションと同様に、ビューごとに基盤を再初期化する必要があります。これを達成するために、すべてのビューを変更$(document).foundation();してカスタムafterRenderEventイベントを発生させる必要がありました。 

export default Ember.View.extend({
    layoutName: 'layouts/home',
    templateName: 'views/home/index',
    tagName: 'main',
    classNames: 'view-home-wrapper',
    //------------------------------------------------------------
    afterRenderEvent : function(){
        //------------------------------------------------------------
        $(document).foundation();
        //------------------------------------------------------------
    }
    //------------------------------------------------------------
});

これで問題は解決しましたが、これにはより良いアプローチが必要です。多分そうでないかもしれません。

于 2014-05-27T02:01:57.073 に答える