title: How to load an Ember Component in application template before everything else?
body: <p>I’m currently building a little Ember App that allows users to access a newspaper’s travel tip articles through a map. Therefor I’ve build a little Leaflet component that displays a map the app can interact with (animate to coordinates, change zoom and stuff).</p>
  
  <p>The map is the central element of the app and is always visible. So I placed the component into the application template. It fills the whole background and is positioned fixed. All child routes are rendered in <code>div.content</code> that “hovers” over the map.</p>
  
  <pre><code>…
  &lt;div class="app-body"&gt;
    &lt;script type="text/x-handlebars" data-template-name="application" id="application"&gt;
    &lt;div class="map-container"&gt;
    {{leaflet-map
          id="map"
          class="map"}}
    &lt;/div&gt;
    &lt;div class="content"&gt;
      {{outlet}}
    &lt;/div&gt;
    &lt;/script&gt;
  &lt;/div&gt;
  …
  </code></pre>
  
  <p>As I have to preload all the articles with their coordinates right at the beginning (to place all markers), I added the preloading to the beforeModel hook of IndexRoute and fetch the data from store in the routes’ model hook via <code>return this.store.all('article');</code>.</p>
  
  <p>The idea is that the map in the background loads right at the beginning and is already visible when the app starts to preload the articles. I thought that would be the case if it is placed into the application template directly. Obviously it’s not. The map is loaded and displayed <em>after</em> the preloading is completed and I don’t have a clue how to change that. Would be great if someone could hint me in the right direction.</p>
  
  <p><strong>Update</strong>
  The console logs show that the compontent, despite it’s part of the application template, is initialized at the end after everything else. No idea why.</p>
  
  <pre><code>…
  [✓] 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 
  </code></pre>