# What's the appropriate place to override the components attributeBindings on init?

**URL:** <https://discuss.emberjs.com/t/whats-the-appropriate-place-to-override-the-components-attributebindings-on-init/8375>\
**Category:** Uncategorized\
**Created:** [July 14, 2015, 12:42am UTC](https://discuss.emberjs.com/t/whats-the-appropriate-place-to-override-the-components-attributebindings-on-init/8375 "2015-07-14T00:42:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kitsunde](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kitsunde/32/15386_2.png) [@kitsunde](https://discuss.emberjs.com/u/kitsunde)\
**Post date:** [July 14, 2015, 12:42am UTC](https://discuss.emberjs.com/t/whats-the-appropriate-place-to-override-the-components-attributebindings-on-init/8375/1 "2015-07-14T00:42:46Z")

</div>

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:

```javascript
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:

```javascript
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?

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [July 14, 2015, 1:15am UTC](https://discuss.emberjs.com/t/whats-the-appropriate-place-to-override-the-components-attributebindings-on-init/8375/2 "2015-07-14T01:15:28Z")

</div>

> [@kitsunde](#):
>
> I have a component {{upload-image src=foo.bar}}. When foo.bar is falsy I want to give it a different value.

```js
// 1.13.x way of handling this
export default Ember.Component.extend({
  tagName: 'img',
  attributeBindings: ['src'],
  didReceiveAttrs: function() {
    if (!this.get('src')) {
      this.set('src', 'http://www.placecage.com/40/40');
    }
  }
});

```

example: [JS Bin - Collaborative JavaScript Debugging](http://jsbin.com/xuzirupenu/edit?html,js,output)

The new lifecycle hooks are documented here: [Ember.js 1.13.0 and 2.0 Beta Released](http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_component-lifecycle-hooks)

---

<div class="post-metadata">

**Author:** ![kitsunde](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kitsunde/32/15386_2.png) [@kitsunde](https://discuss.emberjs.com/u/kitsunde)\
**Post date:** [July 14, 2015, 2:30am UTC](https://discuss.emberjs.com/t/whats-the-appropriate-place-to-override-the-components-attributebindings-on-init/8375/3 "2015-07-14T02:30:54Z")

</div>

Passing in `undefined` to the component should be the equivalent of not declaring the attribute. If you’re passing in an object, it won’t apply the set attribute value:

> **[JS Bin](http://jsbin.com/jidisijici/1/edit)**
>
> A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

---

<div class="post-metadata">

**Author:** ![kitsunde](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kitsunde/32/15386_2.png) [@kitsunde](https://discuss.emberjs.com/u/kitsunde)\
**Post date:** [July 14, 2015, 2:45am UTC](https://discuss.emberjs.com/t/whats-the-appropriate-place-to-override-the-components-attributebindings-on-init/8375/4 "2015-07-14T02:45:27Z")

</div>

Okay so there’s an open issue over on Github [Canary/1.13.2: Value not bubbling back out to controller when using didReceiveAttrs vs didInsertElement · Issue #11637 · emberjs/ember.js · GitHub](https://github.com/emberjs/ember.js/issues/11637) where they seem to be saying that I shouldn’t set the value using the two-way data binding this way.

I suppose I should make it read from a computed property instead and choose the image through that.