I have a component {{upload-image src=foo.bar}}
. When foo.bar
is falsy I want to give it a different value. I setting the value in init
like so:
import Ember from 'ember';
export default Ember.Component.extend({
attributeBindings: ['src'],
tagName: 'img',
init: function(){
this.set('src', 'http://www.placecage.com/40/40');
this._super();
this.set('src', 'http://www.placecage.com/40/40');
},
click: function(){
console.log(this.get('src'));
}
});
However it doesn’t work. The image gets rendered with the value I pass in, not the default. When I click the image it does log the placecage image. Instead if I try to override it later on say didInsertElement
it works as expected:
import Ember from 'ember';
export default Ember.Component.extend({
attributeBindings: ['src'],
tagName: 'img',
didInsertElement: function(){
this.set('src', 'http://www.placecage.com/40/40');
},
click: function(){
console.log(this.get('src'));
}
});
It seems a bit silly to have it render out and only then be able to change the value causing (I presume) a re-render. What’s the appropriate place to check if src
is falsy and set it to a default and get the expected results?