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?

Jake Haller-Roby Jake Haller-Roby · Accepted Answer · 2014-02-13T02:25:13

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)"/>

Update value when value is selected in Ember.Select

1 Answers