2017-11-15 21 views
0

初めてember.jsにWebアプリケーションを作成しています。私はアプリケーションのメインページであるマップを作成するためにember-leafletを使用しています。マップは、メインマップと呼ばれるコンポーネントに位置しているように見える:それは私のウェブサイト内のすべてのルートに存在しているように、このメインマップコンポーネントが私のapplication.hbsに位置していますemberコンポーネントにコンテンツを動的に追加する方法

{{#leaflet-map lat=lat lng=lng zoom=zoom class="max-height" }} 

    {{#each availableBasemaps as |basemap|}} 
    {{#layer-group name=basemap.name default=basemap.default baselayer=true}} 
     {{tile-layer url=basemap.url attribution=basemap.attrib}} 
    {{/layer-group}} 
    {{/each}} 

    {{#each availableLayers as |lr|}} 
    {{#layer-group name=lr.name default=lr.default}} 
     {{wms-tile-layer url=lr.url version=lr.version layers=lr.layers format=lr.format styles=lr.styles transparent=lr.transparent}} 
    {{/layer-group}} 
    {{/each}} 

    {{layer-control handler=(action "layerControlEvent")}} 
{{/leaflet-map}} 

。私が持っている、検索アドレスと呼ばれる1つのルートでは、ユーザ入力に基づいて地図にマーカーを追加する必要があります。マーカーは、次のようになります。

{{#marker-layer location=Location}} 
    {{#popup-layer}} 
    <h4> My address </h4> 
    {{/popup-layer}} 
{{/marker-layer}} 

私は自分のマップにこれらのマーカーを追加するための私の検索address.jsファイル内からメインマップを変更する方法が必要です。 Emberでこれをどのように達成できますか?

答えて

0

EmberのapplicationコントローラはcurrentRouteNameのプロパティを持っています。したがって、いつでもあなたのapplication.hbsテンプレートまたはapplication.jsコントローラの現在のルート名にアクセスできます。あなたのケースでは、あなたのapplication.jsでは、次のような計算されたプロパティを定義することができます

inSearchAddress: Ember.computed('currentRouteName', function(){ 
    return this.get('currentRouteName') === 'search-address'; 
}) 

そして、あなたのapplication.hbsに、あなたは、このような{{main-map inSearchAddress=inSearchAddress}}としてあなたmain-mapコンポーネントに、この計算されたプロパティを渡すことができ、その後のようなコンポーネントでそれを使用します:

{{#if inSearchAddress}} 
    {{#marker-layer location=Location}} 
     {{#popup-layer}} 
      <h4> My address </h4> 
     {{/popup-layer}} 
    {{/marker-layer}} 
{{/if}} 

この使用方法については、twiddleをご覧ください。

+0

は実際に私がこれを実現することを示し、そのサービス上でいくつかの機能を持っています{{#if inSearchAddress}}ブロックが本当にメインのmap.hbsにある必要があります。つまり、inSearchAddressの計算されたプロパティはmain-map.jsにある必要があります。アプリケーションコントローラの外で現在のルート名を取得する方法はまだありますか?ありがとう! –

+0

@JackieM application.hbsで計算されたプロパティを定義し、それをコンポーネントに渡すことができます。私はあなたのコメントに応じて私の答えと私のひねりを更新しました。 –

+0

'currentRouteName'は、Ember 2.15で追加された新しいルーターサービスのプロパティでもあります – acorncom

0

データを保持するために、と言う名前のシングルトンサービス、つまりlocationServiceを使用できます。

既存のリストに場所を追加していますか?配列とするために、単純pushObjectそのルートで {{#each locationService.locationsToRender as |location|}} {{#marker-layer location=location}} {{#popup-layer}} <h4> My address </h4> {{/popup-layer}} {{/marker-layer}} {{/each}}

そして、:その場合は、サービスやアプリケーションのテンプレートの中で述べてlocationsToRender上と呼ばれるいくつかのキーを持っています。あなたが他のすべてのピンの表示を停止し、それだけでピンを表示する場合

代わりに、他のすべてのレイヤを非表示にいくつかの変数をトグルし、ちょうど層locationService.showSearchAddress(location)

関連する問題