title: Ember component sendAction() not working
body: <p>i have been struggling with this for the past few hours, i am making an ember application for creating an invoice. i am using ember component (textfield) to modify the fields using the keyboard, but since actions are not sending back to the relevant controller, i cannot save the records on focusOut or insertNewLine and nothing is happening. i am using :</p>
  
  <pre><code>Ember      : 1.1.2 
  Ember Data : 1.0.0-beta.3 
  Handlebars : 1.0.0 
  jQuery     : 1.9.1
  </code></pre>
  
  <p>this is supposed to look like this: <a href="https://dl.dropboxusercontent.com/u/7311507/embercomponent.png">https://dl.dropboxusercontent.com/u/7311507/embercomponent.png</a></p>
  
  <p>The problem seems to lie within either the controller or the component, it seems i am missing something.</p>
  
  <p>the console.log function gets called on the component, the sendAction call never works...</p>
  
  <p>Thanks for the help.</p>
  
  <h1>ItemsRoute</h1>
  
  <pre><code>App.ItemsRoute = Ember.Route.extend({
      renderTemplate: function() {
            // Render default outlet   
            this.render();
            // render extra outlets
            this.render("client", { outlet: "client", into: "application"});
        },
        model: function() {
          return this.store.find('item');
        }
      });
  </code></pre>
  
  <h1>ItemsController</h1>
  
  <pre><code>App.ItemsController = Em.ArrayController.extend({
      actions: {
        createItem: function () { // NEVER GETS CALLED FROM COMPONENT
          var title = "Nouvel élément"
  
          // Create the new Todo model
          var item = this.store.createRecord('item', {
            desc: title,
            qty: 1,
            price: 0
          });
  
          // Save the new model
          item.save();
        }
      },
      totalCount: function(){
          var total = 0;
          this.get('model').forEach(function(item){
              total += item.get('totalprice');
          });
          return total;
      }.property('@each.qty', '@each.price')
  });
  </code></pre>
  
  <h1>ItemController</h1>
  
  <pre><code>App.ItemController = Em.ObjectController.extend({
      didInsertElement: function(){
          this.$().focus();
      },
      actions: {
          testAction: function(){ // NEVER GETS CALLED FROM COMPONENT
              console.log("controller recieved call for testAction");
          },
          saveItem: function(value) {
              this.get('model').save();
  
          },
          removeItem: function() {
              var item = this.get('model');
              item.deleteRecord();
              item.save();
            },
      },
      isHovering: false
  });
  </code></pre>
  
  <h1>Items Template</h1>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="items"&gt;
        &lt;!-- ...  --&gt;
  
        &lt;tbody&gt;
        {{#each itemController="item"}}
          {{view App.ItemView }}
        {{/each}}
        &lt;/tbody&gt;
  
        &lt;!-- ... --&gt;
    &lt;/script&gt;
  </code></pre>
  
  <h1>ItemView template</h1>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="item"&gt;
      &lt;td class="desc"&gt;{{edit-item value=desc}}&lt;/td&gt;
      &lt;td class="qty"&gt;{{edit-item-number value=qty }}&lt;/td&gt;
      &lt;td class=""&gt;{{edit-item-number step="25" value=price}}&lt;/td&gt;
      &lt;td class="totalprice"&gt;
        {{ totalprice }}
        &lt;div class="delete-item" {{bindAttr class="isHovering"}} {{action "removeItem" on="click"}}&gt;
          &lt;i class="icon-trash"&gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/script&gt;
  </code></pre>
  
  <h1>Views / Components</h1>
  
  <pre><code>App.ItemView = Em.View.extend({
      templateName: "item",
      tagName: "tr",
  
      mouseEnter: function(event) {
          this.get('controller').set('isHovering', true);
      },
      mouseLeave: function(event) {
          this.get('controller').set('isHovering', false);
      }
  });
  
  App.EditItem = Em.TextField.extend({
      becomeFocused: function() {
          this.$().focus();
      }.on('didInsertElement'),
  
      insertNewline: function(){
          console.log('Tried to insert a new line'); // WORKS
          this.triggerAction('createItem'); // DOESN'T WORK
      },
  
      focusOut: function(){
          console.log('Focused the Field Out') // WORKS
          this.triggerAction('testAction', this); // DOESN'T WORK
      }
  
  });
  
  App.EditItemNumber = App.EditItem.extend({
      becomeFocused: null,
      attributeBindings: ["min", "max", "step"],
      type: "number",
      min: "0"
  });
  
  Ember.Handlebars.helper('edit-item', App.EditItem);
  Ember.Handlebars.helper('edit-item-number', App.EditItemNumber);
  </code></pre>