如何动态向ember组件添加内容答案

【问题标题】：How to add content to ember component dynamically如何动态向ember组件添加内容
【发布时间】：2017-11-15 19:11:02
【问题描述】：

我是第一次在 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 中，因此它存在于我网站的所有路线中。在我拥有的一条名为 search-address 的路线中，我需要根据用户输入向地图添加一个标记。标记看起来像：

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

我需要一种方法来从我的 search-address.js 文件中修改主地图，以便将这些标记添加到我的地图中。如何在 Ember 中完成此操作？

【问题讨论】：

标签： javascript ember.js leaflet

【解决方案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 组件，例如{{main-map inSearchAddress=inSearchAddress}}，然后在组件中使用它，例如：

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

你也可以看看这个twiddle这个用法。

【讨论】：

实际上我意识到这行不通，因为 {{#if inSearchAddress}} 块确实需要在我的 main-map.hbs 中，这意味着 inSearchAddress 计算属性需要在主地图.js。还有一种方法可以在应用程序控制器之外获取当前路由名称吗？谢谢！
@JackieM 您可以在 application.hbs 中定义计算属性并将其传递给您的组件。根据您的评论，我已经更新了我的答案和我的想法。
currentRouteName 也是 Ember 2.15 中添加的新路由器服务的属性

【解决方案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)

【讨论】：