如何在應用程序模板之前加載Ember組件？

我目前正在建立一個小Ember應用程序，允許用戶通過地圖訪問報紙的旅行小貼士文章。因此，我構建了一個小傳單組件，該組件顯示應用程序可以與之交互的地圖（動畫到座標，更改縮放和其他內容）。如何在應用程序模板之前加載Ember組件？

地圖是應用程序的核心元素，並始終可見。所以我將組件放入應用程序模板中。它填充了整個背景並且位置固定。所有子路線都在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');掛鉤。

這個想法是，背景中的地圖在開始加載並且在應用程序開始預加載文章時已經可見。我認爲如果將它直接放入應用程序模板就是這種情況。顯然不是。地圖加載並顯示預加載完成後，我不知道如何改變它。如果有人能夠向我提出正確的方向，那會很棒。

更新控制檯日誌表明compontent，儘管它的應用程序模板的一部分，是在一切之後結束初始化。不知道爲什麼。

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

來源

2014-11-17 Oliver

爲什麼在這裏將事物分成'beforeModel'和'model'？在我看來，你可以在'beforeModel'中刪除你的代碼，然後簡單地將'model'鉤子'返回this.store.find（'article'）'。 – NudeCanalTroll

並不那麼簡單。我必須與API合作的API迫使我循環瀏覽幾頁文章以獲得全部內容。因此 - 不是將其實現到適配器 - 我做了一個單獨的遞歸預加載函數，它返回一個承諾，解析下一個調用，返回它的承諾等等。最後所有文章都被推送到商店。爲了保持整潔，我分開了預加載並將其放入beforeModel鉤子中。 – Oliver

在模型解析之前，模板（地圖）不會被渲染。如果鉤子beforeModel或afterModel返回承諾，模型將不會被解析。

您將地圖放在應用程序模板中，並從索引路線獲取文章，很好。問題是，嵌套的路線，返回承諾，也阻止他們的父母。應用程序轉換將被阻止，直到索引轉換解決。

所以當你等待時，你可以使用Loading/Error Substates。在這種情況下，加載狀態。

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

隨着負荷狀態，你允許部分呈現，當嵌套的路線完成其過渡，裝載模板替換無論您的應用功能。

來源

2014-11-17 18:44:59 givanse

這正是我所做的。正如你在我的代碼片段中看到的，組件被放置在應用程序模板中。然後文章被預加載並從索引路徑中獲取。 – Oliver

對，我改進了答案並提供了一個例子。 – givanse

太棒了！使它與加載路線一起工作。非常感謝！ – Oliver

當你加載你的應用程序時，它要做的第一件事是處理App.ApplicationRoute。它將通過它的模型鉤子，設置控制器並呈現模板。之後，它將爲App.IndexRoute（注意：索引路由總是在父路由下隱式創建）執行相同的操作，並將其模板呈現在上面定義的{{outlet}}中。

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

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

來源

2014-11-17 18:47:51 NudeCanalTroll

是的，文章（及其標記）從IndexRoute加載。我對加載異步的地圖有同樣的想法。當我從IndexRoute加載大約140篇文章時，需要一點時間，地圖在預加載完成後顯示。所以它似乎不是地圖花費太長時間才能加載的問題。 – Oliver

如何在應用程序模板之前加載Ember組件？

回答

相關問題