Ember.Select: Wrong selected value when content is set asynchronously

Question

Here's the problem in jsbin: http://emberjs.jsbin.com/bahuvusa/29/edit

When I have a select such as this:

{{view Ember.Select
  contentBinding="items"
  optionValuePath="content.value"
  optionLabelPath="content.caption"
  value=value
}}

Where items is set in the route as an PromiseArray and the data looks like this:

[
  {value: 1, caption: "one"},
  {value: 2, caption: "two"},
  {value: 3, caption: "three"}
]

And I have the value set in a controller:

value: function() {
  return 2;
}.property()

When the template renders I would like to see the second element selected, but instead the value is set to undefined (see the jsbin).

Is there a way to make this work? (without making the elements an ember-data model and using selectionBinding)

Update

I ended up using the afterModel hook and returning the promise from it: http://emberjs.jsbin.com/bahuvusa/40/edit

Answer 1

Based on the comments in your post, I took some of the code from the last comment in this ticket github.com/emberjs/ember.js/issues/1333 and did some small changes, this how the code looks like now: http://emberjs.jsbin.com/bahuvusa/30/edit

Answer 2

You can bind the selection to the model or a property that you want to update dynamically based on that selection change event. So, assign a model or collection to the the selection property, and you can also set the prompt in there:

{{view Ember.Select
  contentBinding="content"
  optionValuePath="content.value"
  optionLabelPath="content.caption"
  selection=model.value
  prompt="Set the prompt"
  value=value
}}

Example JSBin: http://emberjs.jsbin.com/bahuvusa/27/edit

This is pretty much the same concept/pattern across the board with the handlebars helpers. Hope that comes in handy!