Ember.Select “value” doesn't stay in sync with binding

Question

I'm having an issue with Ember.Select, where the "value" binding doesn't stay in sync (goes back to the first value) when the "contents" binding changes.

Here is a JSBin: http://emberjs.jsbin.com/kafod/1

Basically, changing the category changes the available values for the Ember.Select view, and it reverts back to the first available value.

Can anyone help?

chopper chopper · Accepted Answer · 2014-02-15T18:08:18

Well the Ember.Select component needs to have one value selected so when you switch out the category, the sort field gets overwritten. A simple solution would be to have two sort fields, sortAccomodations and sortEvents as well as two Ember.Selects that you switch in your template depending on what category is selected.

See http://emberjs.jsbin.com/kafod/3/ for a working example.

{{#if categoryIsAccommodations}}
    <br />Sort by {{view Ember.Select content=sortOptions
    optionValuePath="content.key"
    optionLabelPath="content.text"
    value=sortAccomodations}}
{{/if}}
{{#if categoryIsEvents}}
    <br />Sort by {{view Ember.Select content=sortOptions
    optionValuePath="content.key"
    optionLabelPath="content.text"
    value=sortEvents}}
{{/if}}

Solution with one 'sort' value:

{{view Ember.Select content=sortOptions
   optionValuePath="content.key"
   optionLabelPath="content.text"
   value=sort}}

Controller:

  saveSorts: (->
    this.set('sortAccommodations', this.get('sort')) if this.get('category') is 'accommodations'
    this.set('sortEvents', this.get('sort')) if this.get('category') is 'events'
  ).observes('sort')

  categoryDidChange: (->
    this.set('sort', this.get('sortAccommodations')) if this.get('category') is 'accommodations'
    this.set('sort', this.get('sortEvents')) if this.get('category') is 'events'
  ).observes('category')

http://emberjs.jsbin.com/kafod/5/

Ember.Select “value” doesn't stay in sync with binding

1 Answers