Get element from the action in a Ember.js controller

Question

How can I get the element from an action in a text area with Ember.js?

This code doesn't work:

App.EnquiryBreakfastController = Ember.ObjectController.extend({
  actions: {
    grow: function(event){
      console.log(this.get('element'));
    }
  }
});

.copy
  %h2 Tell us about your breakfast? 
.enquiry__grid
  {{textarea key-press="grow" value=project placeholder="Water and Bread" class="enquiry--input enquiry--input--area" cols='25' rows='1'}}
.enquiry--button
  {{#link-to 'enquiry.budget' class="btn"}}Next{{/link-to}}

Answer 1

You can't get the element from the controller because it doesn't have any reference to the template. You would instead need to wrap the textarea in a custom component and bind to the key press event.

This example is using an ES6 module export since that is the standard now with ember-cli.

app/components/grow-textarea.js

export default Ember.TextArea.extend({
  grow: function(event) {
    // Your logic here
  }.on('keyPress')
});

Then in your template:

{{grow-textarea value=project placeholder="Water and Bread" class="enquiry--input enquiry--input--area" cols='25' rows='1'}}