Using the emberjs each template does not properly create a Chosen dropdown

[jasoncavett]

I am attempting to use the ember-cli to create a select list that is generated dynamically based on a list of items. The list is populated (the <select><options...></select> are correctly in place), but the actual view does not display items in the dropdown.

Here is an example of my use:

{{#ember-chosen prompt="Select Assignment"}}
  {{#each assignment in model.assignments}}
    <option {{bind-attr value="assignment.description"}}>{{assignment.description}}</option>
  {{/each}} 
{{/ember-chosen}}

[green-arrow]

Sorry for the delay in responding, it's been a busy week for me.

In your scenario, is model.assignments already populated when you initially render the view, or is that something that is lazily loaded?

Currently, this component has no way to dynamically update when its content changes, so it must be there when initially rendered. This is something that needs to be fixed, I am just toying around with the best way to go about doing that.

[jasoncavett]

No worries on the response time! Totally understand.

model.assignments is lazily loaded, so it is hitting the case you are talking about then. I am just getting into Ember, so I wasn't even sure at first if it was something I was doing (I'm still not fully groking the whole thing yet).

Thank you for you work on this project!

[green-arrow]

Nope, nothing you're doing. I am going to leave this issue open for tracking, since this does need to be addressed at some point.

[Globegitter]

Just running into the same issue. Any update from your side @green-arrow? But looking into it myself as well now.

[Globegitter]

Found a quick workaround:

{{#if compareOptions}}
  {{#ember-chosen selectionDidChange="onSelectionChanged"}}
    {{#each compareOptions as |option|}}
      <option value='{{option}}'>{{option}}</option>
    {{/each}}
  {{/ember-chosen}}
{{/if}}

[joelcox]

@Globegitter Thanks for sharing your workaround.

[jaredgalanis]

Just a heads up that I'm finding that wrapping ember-chosen component in conditional doesn't work for a computed property that returns a promise object.