Ember.js: Ember.Select valueBinding and lazy loading - ember.js

Question

I have a view with disabled selector that should be set to the value from ember-data as soon as the model is loaded.
LocationSelectView: Ember.Select.extend({
prompt: "Choose location",
contentBinding: 'controller.locations',
optionValuePath: 'content.id',
optionLabelPath: 'content.title',
valueBinding: 'controller.content.location_id'
})
and the view is disabled in template
{{view view.LocationSelectView disabled="true"}}
everything is working as expected as long as the locations were already loaded to the store,
if they are not loaded, the content is binding as expected (I can verify that by enabling the selector), but the selected value stays at the "prompt".
I worked around this by pre-loading the locations data in the controller's init, but I really don't like this solution.
how can I fix this ? is it a bug ?

Answer 1

This issue is mentioned here: https://github.com/emberjs/ember.js/issues/1333
My solution was to add an observer to the view like this:
preselect: function () {
var item = this.get('items.firstObject');
this.set('currentItem', item);
}.observes('items.#each')
That presumes using selectionBinding (which I prefer) instead of valueBinding

Answer 2

I developed a workaround for this problem. Look at the following code:
App.Select = Ember.Select.extend({
placeholder: '',
allowClear: false,
contentChanged: function() {
if (this.get('value') === undefined && this.get('_iv') != undefined) {
var v = this.get('_iv');
var o = this.get('content').findProperty('id', v);
if (o) {
this.set('value', v);
}
}
}.observes('content.#each'),
init: function() {
this._super();
this.set('_iv', this.get('value'));
},
...
I hope it helps