Question

我目前正在构建一个小型Ember应用程序，允许用户通过地图访问报纸的旅行提示文章。因此，我构建了一个小小的Leaflet组件，显示了应用程序可以与之交互的地图（为坐标设置动画，更改缩放和内容）。

地图是应用程序的核心元素，始终可见。所以我将组件放入应用程序模板中。它填充整个背景并定位固定。所有子路线都以div.content呈现，“悬停”在地图上。

…
<div class="app-body">
  <script type="text/x-handlebars" data-template-name="application" id="application">
  <div class="map-container">
  {{leaflet-map
        id="map"
        class="map"}}
  </div>
  <div class="content">
    {{outlet}}
  </div>
  </script>
</div>
…

由于我必须在开始时预先加载所有带有坐标的文章（放置所有标记），我将预加载添加到IndexRoute的beforeModel钩子中，并通过{{从路径模型钩子中的store中获取数据1}}。

这个想法是背景中的地图在开头加载，并且在应用程序开始预加载文章时已经可见。如果将它直接放入应用程序模板中，我认为就是这种情况。显然不是。预加载完成后，加载并显示地图，我不知道如何更改它。如果有人能向我提示正确的方向，那就太棒了。

更新控制台日志显示组件尽管是应用程序模板的一部分，但在其他所有内容之后最终初始化。不知道为什么。

return this.store.all('article');

Answer 1

在模型结算之前，不会渲染模板（贴图）。如果钩子beforeModel或afterModel返回承诺，则不会解析该模型。

您将地图放在应用程序模板中并从索引路径中获取文章，这很好。问题是，返回承诺的嵌套路由也会阻止他们的父母。应用程序转换将被阻止，直到索引转换结算。

所以当你等待时，你可以使用Loading / Error Substates 。在这种情况下，加载状态。

示例：http://emberjs.jsbin.com/sihedi/1/edit?html,js,output

使用加载状态允许部分呈现，当嵌套路由完成转换时，加载模板将替换为您的应用程序所做的任何内容。

Answer 2

当您加载应用时，它要做的第一件事就是处理App.ApplicationRoute。它将通过其模型钩子，设置控制器，并渲染模板。之后，它将对App.IndexRoute执行相同的操作（注意：始终在父路径下隐式创建索引路径），并将其模板呈现为您在上面定义的{{outlet}}。

因此，在我看来，您应该将找到您的标记的代码放入App.IndexRoute。

但是，您可能仍有问题。如果你的{{leaflet-map}}组件必须异步加载（看起来好像是http://leafletjs.com/reference.html），那么在DOM中呈现组件后，地图本身不会立即出现。在这种情况下，您应该侦听表示已加载地图的事件，然后触发可在路径图层处理的操作以加载标记。

如何在其他一切之前在应用程序模板中加载Ember组件？

2 个答案: