Two-way binding in custom component not working

Question

I've created a component like this:

templates/components/files-dropzone.hbs

<p>Awesome text</p>
<textarea id="drop-textarea" rows="10" cols="50">
  {{value}}
</textarea>

components/files-dropzone.js

import Ember from 'ember';

export default Ember.Component.extend({
  value: '',

  valueChanged: function() {
    console.log("yup")  // is never triggered
  }.observes('value'),
})

I'm using this component like this in another template:

<div class="large-7 columns padding-left-reset"
  {{files-dropzone value=body}}
</div>

While the textarea contains the correct value for body when I load the page it doesn't bind it. I'm observing body and it doesn't change when I change the text inside the textarea.

EDIT: The value-attribute in the component itself doesn't change as well

What am I doing wrong?

Answer 1

I don't think that Ember knows that it should bind the {{value}} to the text area.

It should work, using the textarea helper:

{{textarea value=value id="drop-textarea" rows="10" cols="50"}}

Do you want to adapt the behaviour of the text area in some way?