Update textarea value

1

I have this code here, and in a component, a textarea that I would like to prefill with a value that I get from intentsService.

my-component.js:

export default Ember.Component.extend({

  intentsService: Ember.inject.service('intents'),
  intent: Ember.computed.alias('intentsService.intent'),
  mytextarea: null,
  intentObs: Ember.observer('intent', function () {
    this.set('mytextarea', this.get('intent').response);
  })

});

my-component.hbs:

{{textarea value=newAnswer id="advanced-answer"}}

However, my service being a bit slow to respond, the component is created before the intent.response exists, and when the observer triggers, it’s too late and the textarea doesn’t update with the correct value.

Any idea how I can do that?

Thanks!

2

I haven’t run into this myself, but you might need ember-promise-helpers for this;

{{textarea value=(await newAnswer) id="advanced-answer"}}
3

Reading through your post a bit more, I think you should re-structure your component, use a computed property instead of observer.

// my-component.js
export default Ember.Component.extend({
  intentsService: Ember.inject.service('intents'),
  myTextareaValue: Ember.computed.alias('intentsService.intent.response')
});

// my-component.hbs
{{textarea value=myTextareaValue id="advanced-answer"}}

Although I’m not sure what your Service is exactly, or what intent.response is…

4

Thanks for your help. The service is a call to a distant API, which takes 1-2s to respond.

I’ve tried both propositions, and sadly my textarea stays empty. If I put {{myTextareaValue}} right above the textarea, it shows the value of intent.response there. And if I put any hardcoded string as the value, it also shows in the textarea. What doesn’t show is intent.response as the value of the textarea.

6

@frsechet in my-component.hbs file the value attribute is bound to newAnswer property of a component, but inside intentObs observer you set another variable mytextarea. At least you need to change:

this.set('mytextarea', this.get('intent').response); into this.set('newAnswer', this.get('intent').response);

7

your original handlebar is not using the same property mytextarea in the controller and newAnswer in the handlebars. I see you corrected it to mytextarea. So be careful with those properties. You should avoid observers when you can and use computed properties. A computed property will update only if its used in a handlebar or something calls it.

First place i would start is to put a debugger statement in the computed property like so

myTextareaValue: Ember.computed('intentsService.intent.response', function() {
  debugger;
  return this.get('intentsService.intent.response');
})

this way you check if the property is set in the first place.