title: Ember JS : Uncaught TypeError: Cannot read property 'createRecord' of null
body: <p>I've started to develop an ember JS app using ember cli. 
  For now the idea would be to create svg  elements (circles) by keeping the coordinates of a click. </p>
  
  <p>I used a view to capture a mouse click and then pass it to a controller to create the circle with the coordinates. 
  I'm using the fixture adapter to store datas. </p>
  
  <p>The elements I've put manually in the code work fine when I display them.
  The problem happens when I want to store a new node with my controller, I get the following error : </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'createRecord' of null
  </code></pre>
  
  <p>Here is the controller file svg.js :</p>
  
  <pre class="lang-js prettyprint-override"><code>export default Ember.ObjectController.extend({
      actions:{
          createNode: function(posX,posY){
              var element= this.store.createRecord('element',{ //Here is where I get the error
                  text: "element",
                  x: posX,
                  y: posY,
                  graph: 1
              });
              element.save();
          }
      }
  });
  </code></pre>
  
  <p>Here is my template file :</p>
  
  <pre class="lang-js prettyprint-override"><code>{{#view svg}}
    {{#each item in model}}//For each graph
      {{#each item.elements}}// For each  
          &lt;circle {{bind-attr cx=x}} {{bind-attr cy=y}} r="5" stroke="black" stroke-width="3" fill="yellow" /&gt;
      {{/each}}
    {{/each}}
  {{/view}}
  </code></pre>
  
  <p>The associated route :</p>
  
  <pre class="lang-js prettyprint-override"><code>export default Ember.Route.extend({
      model: function() {
          return this.store.find('graph');
      }
  });
  </code></pre>
  
  <p>The view file :</p>
  
  <pre class="lang-js prettyprint-override"><code>export default Ember.View.extend({
      tagName: "svg",
      attributeBindings: ['width','height'],
      width: "500",
      height: "500",
  
      init: function() {
          this._super();
          this.set("controller", svg.create());
      },
      click: function(evt){
  
          var svg= Ember.$("svg:first");
          var posX = evt.pageX - svg.position().left;
          var posY = evt.pageY - svg.position().top;
          this.get('controller').send('createNode',posX,posY);
      }
  });
  </code></pre>
  
  <p>Maybe I've done something wrong but I don't know why <code>this.store</code> would be null.</p>
  
  <p>Any ideas ? </p>
  
  <p>Thanks in advance!</p>