title: Wait for multiple models to load in an Ember View
body: <p>I have an Ember application that makes use of a canvas element. I'm using the following models: </p>
  
  <p>A <strong>Kit</strong> hasMany <strong>Positions</strong> hasMany <strong>Components</strong> hasMany <strong>Features</strong></p>
  
  <p>Map route object that loads the model data for the first kit:</p>
  
  <pre><code>App.MapRoute = Ember.Route.extend({
  
    model : function() {
      return App.Kit.find(1);
    },
  
    setupController: function(controller, model){
      this._super(controller, model);
    }
  });
  </code></pre>
  
  <p>And a canvas element view in this route</p>
  
  <pre><code>&lt;script type="text/x-handlebars"  data-template-name="application"&gt;
    {{outlet}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars"  data-template-name="map"&gt;
    {{view App.CanvasView }}
  &lt;/script&gt;
  </code></pre>
  
  <p>The canvas view:</p>
  
  <pre><code>App.CanvasView = Ember.View.extend({
    tagName: 'canvas',
    width: 600,
    height: 600,
  
    didInsertElement: function(){
     var el = this.$();
  
     // Pseudo Code
     // When all kit, Position, Component and Feature Data is loaded
     // Pass Data to createFabricCanvas
     // this.createFabricCanvas(el, data);
  
    },
  
    createFabricCanvas: function(el, data){
      fabCanvas = new fabCanvas(el, data);
    }
  });
  </code></pre>
  
  <p>My question is how do I ensure all data for each of the hasMany models is loaded before it passes it into fabCanvas. The FabCanvas library is pre-written and assumes all data is available before processing. </p>
  
  <p>I imagine the solution might involve checking the existence of each model with .on('didLoad').</p>
  
  <p>Thanks. </p>