ember.jsrenderinitember-components

Ember this.set in component


I seem to be doing something wrong with the init property of an Ember component.

My code looks something like this.

import Ember from 'ember';

export default Ember.Component.extend({
  init(){
    this._super(...arguments);
    this.set('initial_value', this.get('value'));
  },

  change(e){
    console.log('value should be reset to ' + this.get('initial_value')) //This prints the initial value correctly.
    this.set('value', this.get('initial_value')); // this line does not update value.
    //this.set('value', 'hello'); //this line does update value.   
  }
});

Why can I update value with a string literal but not with this.get('initial_value')?

And I tried this code, swapping out init for every function in the lifecycle of a component. I did this because I thought it had some to do with the rendering; kind of still do.

Here is the twiddle.


Solution

  • You can just include {{input value=value}} in my-component.hbs file, when you change the input it will call change function in input helper which will call change function of your component which will reset it to initial_value.