如何在应用程序模板中先加载 Ember 组件，然后再加载其他所有内容

How to load an Ember Component in application template before everything else?

本文关键字：加载 然后 其他 组件 Ember 应用程序      更新时间：2023-09-26

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

地图是应用程序的核心元素，并且始终可见。因此，我将组件放入应用程序模板中。它填充整个背景并固定定位。所有子路线都以"悬停"在地图上的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 钩子中，并通过 return this.store.all('article'); 从路由模型钩子中的存储中获取数据。

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

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

…
[✓] template:index ............................................. template at index
[ ] view:default ............................................... undefined.DefaultView
Transition #0: TRANSITION COMPLETE.
[ ] helper:leaflet-map ......................................... undefined.LeafletMapHelper
[ ] component-lookup:main ...................................... undefined.MainComponentLookup
[✓] template:components/leaflet-map ............................ template at components/leaflet-map
[✓] component:leaflet-map ...................................... undefined.LeafletMapComponent
在

模型解析之前，不会呈现模板（映射）。如果挂钩beforeModel或afterModel返回承诺，则不会解析模型。

您将地图放置在应用程序模板中并从索引路由中获取文章，很好。问题在于，返回承诺的嵌套路由也会阻止它们的父路由。在索引转换解析之前，将阻止应用程序转换。

因此，在等待时，您可以使用 加载/错误子状态 .在本例中为加载状态。

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

在加载状态下，你允许部分呈现，当嵌套路由完成其转换时，加载模板将替换为应用执行的任何操作。

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

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

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

相关文章：