# Ember.Select valueBinding / itemController / needs

**URL:** <https://discuss.emberjs.com/t/ember-select-valuebinding-itemcontroller-needs/4058>\
**Category:** Uncategorized\
**Created:** [February 3, 2014, 8:32pm UTC](https://discuss.emberjs.com/t/ember-select-valuebinding-itemcontroller-needs/4058 "2014-02-03T20:32:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manumie](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@Manumie](https://discuss.emberjs.com/u/Manumie)\
**Post date:** [February 3, 2014, 8:32pm UTC](https://discuss.emberjs.com/t/ember-select-valuebinding-itemcontroller-needs/4058/1 "2014-02-03T20:32:59Z")

</div>

Hello,

I’m trying to populate an `Ember.Select` with data from a controller loaded into the context with `needs`.

I’m using Ember-App-Kit and Ember-Data.

```auto
Ember : 1.4.0-beta.2 
Ember Data : 1.0.0-beta.6
Handlebars : 1.3.0 
jQuery : 2.0.3 

```

I have some titles, that are `needed` by other controllers, so I get the data on `init` :

```nohighlight
App.TitlesController = Em.ArrayController.extend({
  init: function() {
    this._super(arguments);

    this.store.find('title').then(function(titles) {
      titles.forEach(function(t) {
        // actually, I'm doing some processing here
        // but it has no impact on my issue
        _self.pushObject({
          id: t.id, 
          label: t.label});
      });
    });
  }
});

```

I have an `identity` model :

```nohighlight
App.Identity = DS.Model.extend({
  firstname: DS.attr(), 
  title: DS.attr()
});

```

and the controller (actually an `itemController` inside a `{{#each}}` loop) :

```nohighlight
App.IdentityController = Em.ObjectController.extend({
  needs: ["titles"],
  titleList: Em.computed.equal('controllers.titles'),

  selectedTitle: function(key, value) {
    // I have tried different ways to "alias" the current title
  }.property('title')
});

```

Now the template :

```nohighlight
{{#each identitys itemController='identity'}}
{{title}} {{selectedTitle}}
{{view Ember.Select 
            contentBinding="titleList"
            valueBinding="selectedTitle"
            optionLabelPath="content.label"
}}
{{firstname}}

```

(I removed `optionValuePath` as it will map on `content.id`)

`{{title}}`, `{{selectedTitle}}` and `{{firstname}}` render correctly, but the value for Ember.Select view is not set.

I’ve tried different implementations for my `selectedTitle` computed property :

- **alias**

```nohighlight
selectedTitle: Em.computed.alias('title')

```

The binding seems OK, but the value for Ember.Select is not set.

- **value**

```nohighlight
selectedTitle: function(key, value) {
  if ( value ) { // setter
    this.set('title', value);
  } else { // getter
    return this.get('title');
  }
}.property('title')

```

Binding OK, but Ember.Select value not set

- **object**

```nohighlight
selectedTitle: function(key, value) {
  if ( value ) { // setter
    this.set('title', value.id);
  } else { // getter
    return this.get('titleList').findBy('id', this.get('title'));
  }
}.property('title')

```

With this, the binding seems OK within the Ember.Select view.

However, it seems that the first time the template renders, the `titles` controller content is not set (promise has not fulfilled ?).

Therefore its alias `titleList` is _undefined_, and so is `selectedTitle` (= `this.get('titleList').findBy('id', this.get('title'))`.

Moreover, because of the binding, it sets my model’s property to _undefined_…

- What am I doing wrong ?
- Am I using the `init` method properly ?  
I tried with `this.get('titles').then()` : I get a “No `then` method” error  
Can I have the controller wait for the promise to fulfill ?
- Should I have the route load the `titles` data (with `setupController`) instead ?

Any suggestion welcome !

---

<div class="post-metadata">

**Author:** ![Manumie](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@Manumie](https://discuss.emberjs.com/u/Manumie)\
**Post date:** [February 4, 2014, 10:13am UTC](https://discuss.emberjs.com/t/ember-select-valuebinding-itemcontroller-needs/4058/2 "2014-02-04T10:13:42Z")

</div>

I’ve made a [JSFiddle](http://jsfiddle.net/Manumie/ntLyn/1/) to illustrate my issue. (edit: I had forgottent to save the fiddle…)

I’ve combined different possibilities : `valueBinding` vs `selectionBinding` ; null vs value.

In examples 3 and 4, I would expect the select be set to my value, but it appears that the value, bound either with `valueBinding` or `selectionBindng`, is reset somehow by the Ember.Select View.

---

<div class="post-metadata">

**Author:** ![midd](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/midd/32/196_2.png) [@midd](https://discuss.emberjs.com/u/midd)\
**Post date:** [February 4, 2014, 9:58pm UTC](https://discuss.emberjs.com/t/ember-select-valuebinding-itemcontroller-needs/4058/3 "2014-02-04T21:58:41Z")

</div>

In your JSFiddle example you use variables, wich are not defined in the application controller e.g `{{mysecondval}}`. You need to use something like `{{controllers.mylist.mysecondval}}`.

---

<div class="post-metadata">

**Author:** ![Manumie](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@Manumie](https://discuss.emberjs.com/u/Manumie)\
**Post date:** [February 4, 2014, 11:53pm UTC](https://discuss.emberjs.com/t/ember-select-valuebinding-itemcontroller-needs/4058/4 "2014-02-04T23:53:50Z")

</div>

Indeed. It seems so obvious now. Thanks a lot.