如何在其他所有內容之前在應用程序模板中加載Ember組件？

Question

我目前正在構建一個小的Ember App，允許用戶通過地圖訪問報紙的旅行提示文章。 為此，我建立了一個小小的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鈎子中，並通過return this.store.all('article');從路由的模型鈎子中的store中獲取數據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 

Answer 1

除非模型解析，否則不會渲染模板（地圖）。 如果鈎住beforeModel或afterModel返回beforeModel則不會解析該模型。

您已將地圖放置在應用程序模板中，並從索引路徑中獲取了文章，很好。 問題在於，返回承諾的嵌套路線也會阻止其父母。 在索引轉換解決之前，應用程序轉換將被阻止。

因此，在等待期間，您可以使用加載/錯誤子狀態 。 在這種情況下，處於加載狀態。

示例： http ： //emberjs.jsbin.com/sihedi/1/edit？html，js，output

在加載狀態下，您允許部分渲染，並且當嵌套路由完成其過渡時，加載模板將替換為您的應用執行的任何操作。

Answer 2

加載應用程序時，要做的第一件事是處理App.ApplicationRoute 。 它將通過其模型掛鈎，設置控制器並呈現模板。 之后，它將對App.IndexRoute執行相同的App.IndexRoute （注意：索引路由始終在父路由之下隱式創建），並將其模板呈現到您在上面定義的{{outlet}} 。

因此，在我看來，您應該將找到標記的代碼放入App.IndexRoute 。

但是，您可能仍然有問題。 如果您的{{leaflet-map}}組件是必須異步加載的東西（在http://leafletjs.com/reference.html上似乎是這種情況），則地圖本身不會在該組件之后立即顯示在DOM中呈現。 在這種情況下，您應該偵聽表示地圖已加載的事件，然后觸發可在路線層處理的操作以加載標記。