Update value when value is selected in Ember.Select

Question

I have a Ember.Select in my template and an image:

Difficulty: {{view Ember.Select id="id_diff" contentBinding="difficulties" optionValuePath="content.id" optionLabelPath="content.title"}}
<img src="(path)" />

The Select is filled with values coming from server; in the controller:

difficulties: function() {
    return this.get('store').find('difficulty');
}.property()

and the model:

Gmcontrolpanel.Difficulty = DS.Model.extend({
    title: DS.attr('string'),
    description: DS.attr('string'),
    path: DS.attr('string')
});

And that's ok; but i would like that when a difficulty is selected from the Ember.Select, the corrispondent path property would be inserted in the img tag Anyone knows how to get this result?

Could you put together a jsBin or jsFiddle? – chopper Feb 13 '14 at 01:43 — chopper, Feb 13 '14 at 01:43

score 2 · Accepted Answer · answered Feb 13 '14 at 02:25

2

To accomplish this, I would set up a couple of things.

First, update your Ember.Select to include a valueBinding against the model with a new property:

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

This will bind your select view to a model object. Which means, on the controller, we can now include a new function with a .observes on that field:

updateImage : function(){
    this.set('fullPath', this.get('path') + this.get('selectedDificulty'));
}.observes('selectedDificulty');

And finally, change your image path to the newly created one:

<img src="(fullPath)"/>

answered Feb 13 '14 at 02:25

Jake Haller-Roby

6,335
1
18
31

oops. Missed an important step. to bind to the model attribute. Otherwise it will only render once on entering the route. – Jake Haller-Roby Feb 13 '14 at 03:06
Now something happens, but it's still not correct: i obtain in the src attr "undefined 1" and when i change the value in the select, choosing the Nth value, i get undefined n in the src attr... – Cereal Killer Feb 13 '14 at 03:13
hard to debug further without the code. Can you throw up a jsbin? – Jake Haller-Roby Feb 13 '14 at 03:15
The `valueBinding` argument worked for me, thank you. But `Ember.Select` [documentation](http://emberjs.com/api/classes/Ember.Select.html) does not mention that argument! Why? How am i supposed to learn that it works this way? – Andrey Mikhaylov - lolmaus Jun 02 '14 at 05:24

Update value when value is selected in Ember.Select

1 Answers1