Ember Select set default value

Question

Even after reading a lot of doc, I'm still not able to accomplish this simple task;

I have a select view in my template:

{{view Ember.Select id="id_diff" contentBinding="difficulties" optionValuePath="content.id" optionLabelPath="content.title" valueBinding="selectedDifficulty"}}

this select is filled correctly with this data: {id: 1, title: easy}{id: 2, title: medium}{id: 3, title: hard}

I just want to set the default value to "medium" instead of easy that is the default value now; how can I do this?

The Controller:

Gmcontrolpanel.InsertActivityController = Em.Controller.extend({
difficulties: function() {
    var difficulties = [];
    difficulties = this.get('store').find('difficulty');
    return difficulties;
}.property(),
changeDifImg: function() {
    jQuery('.diff-icon').animate({'opacity': 0}, 300);
    jQuery('#diff-img' + jQuery('#id_diff').val()).animate({'opacity': 1}, 300);    
}.observes('selectedDifficulty'),
startValue: null
});

The ChangeDifImg property is used to change the associated difficulty icon when user changes the value in the select;

(in the template:

{{#each difficulty in difficulties}}
        <img class="diff-icon" id="diff-img{{unbound difficulty.id}}" src="{{unbound "difficulty.link"}}" style="opacity: 0" />
        {{/each}}

this creates one immage for every difficulty and set them all invisible; then when the user selects a value in the Select, the changeDifImg property shows the correct icon

Cereal Killer · Answer 1 · 2014-02-25T00:17:37.423

1

In the end was easy:

{{view Ember.Select contentBinding="controller.difficulty" optionValuePath="content.id" optionLabelPath="content.title" valueBinding="idDiff"}}

and then in the controller:

App.DifficultyController = Ember.Controller.extend({
    idDiff: '2'
});

With this the Select will start with default value of '2'; if you want to set the default not by value but by content, you need to use selectionBinding instead of valueBinding

edited Feb 25 '14 at 00:17

answered Feb 15 '14 at 17:59

Cereal Killer

3,387
10
48
80

Probably this is not completely Ember-way of doing things, but works; if someone has a better solution... – Cereal Killer Feb 15 '14 at 18:00

chopper · Answer 2 · 2014-02-15T02:12:25.463

0

Specify selectionBinding:

{{view Ember.Select id="id_diff" 
    contentBinding="difficulties" 
    optionValuePath="content.id" 
    optionLabelPath="content.title" 
    valueBinding="selectedDifficulty" 
    selectionBinding="default"}}

And make the following changes to your controller:

Gmcontrolpanel.InsertActivityController = Em.Controller.extend({
   difficulties: function() {
      var difficulties = [];
      difficulties = this.get('store').find('difficulty');
      return difficulties;
}.property(),
default: function() {
   return this.get('difficulties').first();
}.observes('difficulties.@each'),
changeDifImg: function() {
    jQuery('.diff-icon').animate({'opacity': 0}, 300);
    jQuery('#diff-img' + jQuery('#id_diff').val()).animate({'opacity': 1}, 300);    
}.observes('selectedDifficulty'),
startValue: null
});

edited Feb 15 '14 at 02:12

answered Feb 15 '14 at 01:33

chopper

6,649
7
36
53

Ok, but how selectionBinding works? Setting selectionBinding to "selectedDifficulty" has no effect; how can I set the selectedDifficulty to "medium"? – Cereal Killer Feb 15 '14 at 01:35
Could you post your controller, too? It's easier with an example – chopper Feb 15 '14 at 01:37
If i try this, an error occur saying that it has no method first() – Cereal Killer Feb 15 '14 at 02:20
Is it so hard to set the default value of a Select? I thought that was a simple task... :( – Cereal Killer Feb 15 '14 at 02:30
the problem is likely that `find()` is returning a promise. Could you put together a jsFiddle? – chopper Feb 15 '14 at 02:34
I don't understand how this fiddles work... The code is exactly as pasted above... In the fiddle doesn't work: http://jsfiddle.net/M2a9E/ – Cereal Killer Feb 15 '14 at 02:44

Ember Select set default value

2 Answers2

Linked