I am attempting to set the default selected value of a select box generated via {{view Em.Select}} which should be a pretty simple task according to documentation either setting valueBinding to the appropriate value or selecitonBinding to the full object represented by the item.

Sample code here: /

HTML

<script type="text/x-handlebars">

    {{outlet}}

</script>

<script type="text/x-handlebars" data-template-name="index">

    !{{dafaultOption}}!

    {{view Em.Select prompt="test" contentBinding="controllers.option.content" optionLabelPath="content.name" optionValuePath="content.id" valueBinding="dafaultOption" }}
</script>

JS

App = Ember.Application.create();

App.Store = DS.Store.extend({
    adapter: DS.FixtureAdapter
});

App.Router.map(function() {
  // put your routes here
});

App.IndexController = Em.Controller.extend({
    dafaultOption: 'OP2',
    needs:['option']  
});

App.Option = DS.Model.extend({ 
    name: DS.attr('string')
});

App.Option.FIXTURES = [
    {
        id: 'OP1',
        name: 'Option 1'
    },
    {
        id: 'OP2',
        name: 'Option 2'
    }
];

App.OptionController = Em.Controller.extend({
    init: function() {
        this._super();
        this.set('model', this.get('store').find('option'))
    }
})

Note on page load the value between the !! is empty, despite defaultOption being set to 'OP2' in the IndexController declaration. If I remove the valueBinding option from {{view Em.Select}} OP2 is output between the !! as expected, which leads me to believe that when the select is being rendered it is setting the indexController.defaultOption to null (prompt option). When I change the select manually the value updates as expected. Any ideas?

I am attempting to set the default selected value of a select box generated via {{view Em.Select}} which should be a pretty simple task according to documentation either setting valueBinding to the appropriate value or selecitonBinding to the full object represented by the item.

Sample code here: http://jsfiddle/p2dtx/2/

HTML

<script type="text/x-handlebars">

    {{outlet}}

</script>

<script type="text/x-handlebars" data-template-name="index">

    !{{dafaultOption}}!

    {{view Em.Select prompt="test" contentBinding="controllers.option.content" optionLabelPath="content.name" optionValuePath="content.id" valueBinding="dafaultOption" }}
</script>

JS

App = Ember.Application.create();

App.Store = DS.Store.extend({
    adapter: DS.FixtureAdapter
});

App.Router.map(function() {
  // put your routes here
});

App.IndexController = Em.Controller.extend({
    dafaultOption: 'OP2',
    needs:['option']  
});

App.Option = DS.Model.extend({ 
    name: DS.attr('string')
});

App.Option.FIXTURES = [
    {
        id: 'OP1',
        name: 'Option 1'
    },
    {
        id: 'OP2',
        name: 'Option 2'
    }
];

App.OptionController = Em.Controller.extend({
    init: function() {
        this._super();
        this.set('model', this.get('store').find('option'))
    }
})

Note on page load the value between the !! is empty, despite defaultOption being set to 'OP2' in the IndexController declaration. If I remove the valueBinding option from {{view Em.Select}} OP2 is output between the !! as expected, which leads me to believe that when the select is being rendered it is setting the indexController.defaultOption to null (prompt option). When I change the select manually the value updates as expected. Any ideas?

• javascript
• ember.js

Share Improve this question Follow asked Sep 13, 2013 at 21:56 Matt BerkowitzMatt Berkowitz 97566 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The selectionBinding is the right parameter to set on a Ember.Select but it should be an item contained in the array you pass to its contentBinding, so doing it like the following should work.

Define a property on your App.OptionController to hold the selected item:

App.OptionController = Em.Controller.extend({
  selectedOption: Ember.puted.alias('content.firstObject'),
  init: function() {
    this._super();
    this.set('model', this.get('store').find('option'))
  }
});

And set this property as your selectionBinding:

{{view Em.Select 
  prompt="test" 
  contentBinding="controllers.option.content" 
  optionLabelPath="content.name" 
  optionValuePath="content.id" 
  selectionBinding="controllers.option.selectedOption" }}

Working demo.

Hope it helps.

You'll notice that your dafaultOption in the template is blank. This is an order of execution issue. The content for the select is initially empty, so the the Ember.Select updates to select the matching item (in this case, none match because none are loaded) and dafaultOption is updated to null. Then your data loads and, as dafaultOption is null, no item is selected.

A working demo using ids: http://jsfiddle/eZWXT/

Or you can use intuitivepixel's demo which uses object equality.