selectionBinding in Ember.Select don't work together with associations

[sandstrom]

There seem to be a problem with associations and Ember.Select (built-in view). My guess is that the objects are compared with === and the comparison returns false, since they are different instances. I've tried to track down the lines in the source where this happens, but haven't found it.

Handlebars code:

<script type="text/x-handlebars">

  {{#view EmberApp.MyView }}

    <p>Neither of these selection bindings work:</p>

      {{view Ember.Select
             contentBinding="EmberApp.AllCountries"
             selectionBinding="user.country"
             optionLabelPath="content.name"
             optionValuePath="content.id"}}

      {{view Ember.Select
             contentBinding="EmberApp.AllCountries"
             selectionBinding="user.countryId"
             optionLabelPath="content.name"
             optionValuePath="content.id"}}

    {{view Ember.Select
             contentBinding="EmberApp.AllCountries"
             selectionBinding="testId"
             optionLabelPath="content.name"
             optionValuePath="content.id"}}

  {{/view}}

</script>

This is the javascript:

window.EmberApp = Em.Application.create()

EmberApp.store = DS.Store.create({
  adapter: DS.fixtureAdapter
})

EmberApp.Country = DS.Model.extend({
  name: DS.attr('string')
})

EmberApp.Country.FIXTURES = [{ id:"us", name: "US"}, { id:"se", name:"Sweden"}];

EmberApp.AllCountries = Ember.ArrayProxy.create({content:EmberApp.Country.FIXTURES});

EmberApp.User = DS.Model.extend({
  country: DS.hasOne(EmberApp.Country, { key: "countryId" })
})

EmberApp.MyView = Em.View.extend({

  user: EmberApp.store.createRecord(EmberApp.User, {
    name: "Kalle", 
    countryId: "se"
  })

  testId: "se" # 

})

console.log( EmberApp.store.find(EmberApp.Country, 'se') )

http://jsfiddle.net/sandstrom/YJ7zM/3/

[guilhermeaiolfi]

The problem is that Em.Select sets the whole object not just the id.

Try selecting an item in your 3rd select and see the value of EmberApp.MyView.get('testId'). It's going to output an object (the model object).

Currently, Em.Select doesn't support selection by value. It shouldn't be hard to implement it, something like:

value: Em.Computed(function(key, value){
   var content = get(this, 'content'),
         select = null,
         self = this;

   if (value !== undefined){ //set
        content.forEach(function(item, idx){
           if (item.get(self.get('optionValuePath')) == value)
           {
                 select = item;
                 return;
           }
        });
        this.get('selection').pushObject(select);
        return value;
   }
   return this.get('selection').get(self.get('optionValuePath'));
}).property('selection').cacheable()

I did not test it. Maybe I'll give it a shoot later and if I got lucky I'm going to create a pull request for it.

[guilhermeaiolfi]

Here it is: http://jsfiddle.net/YJ7zM/6/

It will only work for "id" as optionValuePath, but it illustrates the idea.

Hope that helps.

[dmathieu]

It would be very cool to have your jsfiddle integrated. Could you write tests and send a PR ?

[guilhermeaiolfi]

If @ebryn says that's the way to go, I'll do it. Maybe he has a better idea.

[cloke]

The above solution didn't fully work for me. I had to set the contextBinding as well. I also made it so I could bind to any value, but I have a feeling the current code might fail in some situations.

var path = this.get("optionValuePath").split(".")[1], selection = this.get('selection');
if ( selection && path ) {
    this.setPath('bindingContext.' + path, selection[path]);
    return this.get('selection')['path'];
} else {
    return null;
}

[ebryn]

The original jsFiddle referenced (http://jsfiddle.net/sandstrom/YJ7zM/3/) only has one valid usage of selectionBinding - the first one. Select doesn't currently support binding the selection using a value. There is a bug filed for this in the Ember issue tracker: emberjs/ember.js#482

@sandstrom The issue is you're trying to use the fixture data directly in the contentBinding. You need to use the store's findAll method to populate the content of the select. Here's a working jsFiddle example: http://jsfiddle.net/4HjLf/1/

There doesn't seem to actually be a bug here so I'm closing this issue.

[sandstrom]

I used the fixture data only to setup a simple test case (maybe I shouldn't have done that).

Anyway, just close the issue if it isn't a bug. Thanks for taking time looking at it!