如何將內容動態添加到余燼組件

Question

我是第一次在ember.js中編寫一個Web應用程序。 我正在使用ember-leaflet來創建地圖，這是應用程序的主頁。 該地圖位於名為main-map的組件中，如下所示：

{{#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}}

這個主地圖組件位於我的application.hbs中，因此它存在於我網站的所有路徑中。 在一條我稱為搜索地址的路線中，我需要根據用戶輸入在地圖上添加一個標記。 該標記將類似於：

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

我需要一種從search-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組件，例如{{main-map inSearchAddress=inSearchAddress}} ，然后在組件中使用它，例如：

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

您也可以看看這個玩弄的這種用法。

Answer 2

您總是可以使用一個單身的服務，比如說locationService來保存數據。

您要將位置添加到現有列表中嗎？ 如果是這樣，請在所述服務和您的應用程序模板中具有一些名為locationsToRender鍵： {{#each locationService.locationsToRender as |location|}} {{#marker-layer location=location}} {{#popup-layer}} <h4> My address </h4> {{/popup-layer}} {{/marker-layer}} {{/each}}

然后在該路由中，只需將pushObject到所述數組即可。

相反，如果你想停止顯示所有其他引腳，只能說明針，然后對那個切換一些變量，隱藏所有其他層和只是一些服務功能顯示層locationService.showSearchAddress(location)