1

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?

Hedge
  • 16,142
  • 42
  • 141
  • 246

1 Answers1

2

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?

enspandi
  • 663
  • 4
  • 6
  • Yeah what I want is have a component which contains a {{textarea}} along with some other elements. Therefore I can't simply extend Ember.Textarea. Incorporating the textarea helper like you suggested in order to get the binding worked though. Thanks a lot. – Hedge Mar 04 '15 at 11:31