2015-12-24 7 views
7

私の仕事は、Ember 2アプリケーション用のメニューコンポーネントを開発することです。これは、ユーザーがルートを通過するときに視覚的表現が変化する複雑なコンポーネントになります。たとえば、 "/ index"ルート上では特定のメニューとすべてのアイテムを無効にする必要がありますが、 "/ details"のときはそのアイテムを有効にします。EmberJS 2でルート変更を通知するコンポーネント

シングルトンモデルに渡されるコンポーネントがあります(現在、サービスに格納されていますが、btwはEmberにグローバルに利用可能なシングルトンモデルを格納するのに適していますか?)。それは物事をうまく表示しますが、現在のルートを尊重したり、ユーザーがアプリを通過するときにルートの変化をキャッチしたりしません。どうすれば達成できますか?

それを総括:

  1. をコンポーネントが初期状態を表示することができるように何とか現在のルートを取得する必要があり、例えば、ユーザは、「/詳細」ページをブックマークして、それを訪問しました。
  2. コンポーネントはルートの変更をどうにか処理しなければなりません。
  3. サービスはシングルトンモデル(サーバーから取得される可能性があります)を保持するのに適していますか。

上記の3つの方法に対処する方法について考えていただけますか?

解決しよう:[OK]を、ここでは、@ BEKの提案のおかげで行われている方法は次のとおりです。

import Ember from "ember"; 

export default Ember.Component.extend({ 
    router: Ember.inject.service("-routing"), 

    didInsertElement: function() { 
     let r = this.get("router"); 
     console.log("Initial route", r.get("currentRouteName")); 

     r.addObserver("currentRouteName", this, "currentRouteNameChanged"); 
    }, 

    "currentRouteNameChanged": function(router, propertyName) { 
      console.log(router.get("currentRouteName")); 
    } 
}); 

多くの質問を:) - 私は(それを文字列を作るために)引用符でcurrentRouteNameChanged関数名を囲むように持っていたそうそれは呼ばれませんでした。私はここで何か非常に基本的かつ明白な何かを逃すと思います

もう1つの問題はファンキーなサービス名-routing - @Bek、どのように私はそれを自分自身で理解することができたかについてのヒントです、私は情報を調べることができる注射可能なもののリストはありますか? Emberのドキュメントにはまだありませんが、ソースコードでどこからチェックアウトするのですか?どれくらい安定していますか?-routing一般的に名前は*routingか最終版の何かになりますか? 1及び2に

+0

悪いアイデアではありませんので、グローバルロジック/オブジェクトを共有するために作られた例外やサービスがあることができます:Ember.observer( 'ルータを。現在のルート名を取得するために、テンプレート内の 'router.currentRouteName'に直接アクセスしてください。 – Bek

+0

'ルート設定 'は文書化されていませんので、そのようなものはember.jsのソースコードを通っています: 'r.addObserver ...'のP – Bek

+0

が '' currentRouteNameChanged''に変更され、関数宣言で引用符なしで使用できます。 – rafamds

答えて

5

回答:燃えさし2.xの最新バージョンでは (2.2で少なくとも)routerはそうあなたがコンポーネントrouter: Ember.inject.service('-routing')にそれを注入し、currentRouteName上の変化を観察できるサービスとして提供されていますが、それはプライベートサービスですしたがって、変更される可能性があるため(慎重に使用する必要があります(routingに改名される可能性があります)、今後rfcの一部となるルーティング可能なコンポーネントを提案するrfc https://github.com/emberjs/rfcs/pull/38もあります。 3へ

ANSER: サービス通常ステートレスが、それはあなたが `onRouteChange行うことができます

+0

'router'は注入されていないようですが、' didInsertElement'に 'this.get( 'router')'を記録しようとすると 'undefined'となってしまいます。 Emberのバージョンは2.2.0-beta.1です。 'router:Ember.inject.service()' – Barbadoss

+0

あなたは 'router:Ember.injectで試してみることができますか?サービス( ' - ルーティング') ' – Bek

+0

うん、私は'ルート 'から何かを得た。それを見てさらに遊ぶ。すぐに私はそれが1と2を解決するのを見て、私はアップデートで戻ってきます。Thanks @ Bek! – Barbadoss

関連する問題