CODEWITHSUNDEEP
ember.js
user1338121
user1338121

Reputation: 805

Make a Ember.js dropdown select an option by default

Below is the snippet defaulting the dropdown with a value.

App.selectedOption.set("option","1");

But Don't see the dropdown getting selected with the defaulted value onload. What could be the issue here?

Snippet for Ember dropdown

<script type="text/x-handlebars">
    {{#view App.SortSampleView  }}
      {{view Ember.Select
             contentBinding="App.viewSampleController"
             selectionBinding="App.selectedOption.option"
             optionLabelPath="content.name"
             optionValuePath="content.id" class="dropdown"
         prompt="Select..." }} 
    {{/view}}    
</script>

Snippet for selection binding: 

App.selectedOption= Ember.Object.create({option:null});

Upvotes: 2

Views: 3286

Answers (1)

pangratz
pangratz

Reputation: 16163

This is a known issue, see #482 in the issue tracker. The discussion states that it's not supported to set the selected option by setting the valuePath Instead you have to set the specific object as the selected one. See http://jsfiddle.net/pangratz666/NgXpF/:

Handlebars:

<script type="text/x-handlebars">
      {{view Ember.Select
             contentBinding="App.viewSampleController"
             selectionBinding="App.selectedOptionController.option"
             optionLabelPath="content.name"
             optionValuePath="content.id" class="dropdown"
         prompt="Select..." }} 
</script>​

JavaScript:

App.viewSampleController = Ember.ArrayProxy.create({
    content: [],
    addObject: function(id, name){
        this.pushObject(Ember.Object.create({
            id: id,
            name: name
        }));
    }
});

App.selectedOptionController = Ember.Object.create({
    option: null
});

App.viewSampleController.addObject(1, 'first');
App.viewSampleController.addObject(2, 'second');
App.viewSampleController.addObject(3, 'third');

var second = App.viewSampleController.objectAt(1);
App.selectedOptionController.set('option', second);

Upvotes: 3

Related Questions