javascript - 如何首先在应用程序模板中加载 Ember 组件？

Question

我目前正在构建一个小型 Ember 应用程序，允许用户通过 map 访问报纸的旅行提示文章。因此，我构建了一个小 Leaflet 组件，用于显示应用程序可以与之交互的 map (动画坐标、更改缩放等)。

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

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

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

…
[✓] 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 

Answer 1

在模型解析之前，不会渲染模板( map )。如果钩子(Hook) beforeModel 或 afterModel 返回 promise ，则模型不会被解析。

您将 map 放置在应用程序模板中并从索引 route 获取文章，很好。问题在于，返回 promise 的嵌套路由也会阻塞它们的父级。应用程序转换将被阻止，直到索引转换解决为止。

所以当你等待的时候，你可以使用 Loading / Error Substates 。本例中为加载状态。

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

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