Update value when value is selected in Ember.Select - ember.js

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?

Answer 1

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