emberコンポーネントにコンテンツを動的に追加する方法

Question

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

{{#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でこれをどのように達成できますか？

Answer 1

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をご覧ください。

Answer 2

データを保持するために、と言う名前のシングルトンサービス、つまり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)