Default selected value for Ember.Select using belongsTo Ember Data model property?

Question

What I'm trying to do seems like a very common use case of Ember.Select, but I haven't found a solution yet.

I'm trying to set the default value of Ember.Select using a belongsTo Ember Data property. I have the following Ember.Select view in my template:

{{view Ember.Select content=neighborhoodOptions value=neighborhood.id optionValuePath="content.value" optionLabelPath="content.label"}}

The controller for this view looks like:

App.PropertyEditController = Ember.ObjectController.extend({
    neighborhoodOptions: [{value: 1, label: 'Foo'}, {value: 2, label: 'Bar'}]
});

I am using Ember Data and have a model with a belongsTo property for this controller which looks like:

var attr = DS.attr;

App.Property = DS.Model.extend({
    neighborhood: DS.belongsTo('neighborhood')
});

However, this does not set any default option when the page loads. What's worse, it makes the neighborhood.id undefined when I look the neighborhood model in the Ember Inspector console. If I remove the value attribute from the view, the neighborhood.id is defined again so it seems that the Ember.Select value property behavior is setting the id to undefined. I do not understand why it is doing this.

How can I bind the neighborhood id property and make it the default Ember.Select choice?

It is clearly mentioned in emberjs documentation. Please go through documentation emberjs.com/api/classes/… — Rigel
Thank you for the response, but I have already looked through the documentation and it hasn't helped in this scenario. I think the best thing to do for the time being is just to use the selection property as the value property seems to be buggy. — user3009816

NicholasJohn16 NicholasJohn16 · Accepted Answer · 2014-04-25T08:54:41

Try:

selection=neighborhood

Instead of value. That way itll bind to that model instance rather than just the id value.

Default selected value for Ember.Select using belongsTo Ember Data model property?

1 Answers