CODEWITHSUNDEEP
ember.js
elsurudo
elsurudo

Reputation: 3659

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

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?

Upvotes: 1

Views: 208

Answers (1)

chopper
chopper

Reputation: 6709

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/

Upvotes: 1

Related Questions