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＆＃39; 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以了解此用法。

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)

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

2 个答案: