Got a question about Ember Observers and how to work with them. I'm very new to Ember, so pardon me if my knowledge isn't quite there yet. The problem I'm having is that I want a simple text-field to get filled with a specific email-address, based on a selection from a drop-down menu. I stored a value in the prepopulatedCounties Array, but am not sure how to, based on the value, set the email-address to the text-field.
The JS code I have (app/routes.demo.js):
export default Ember.Route.extend({
model() {
var prepopulatedCounties = Ember.A();
prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Charlotte" }));
prepopulatedCounties.pushObject(Ember.Object.create({ value: "2", display: "Collier" }));
prepopulatedCounties.pushObject(Ember.Object.create({ value: "3", display: "Hillsborough" }));
prepopulatedCounties.pushObject(Ember.Object.create({ value: "4", display: "Lee" }));
prepopulatedCounties.pushObject(Ember.Object.create({ value: "5", display: "Manatee" }));
return Ember.Object.create({
counties : prepopulatedCounties,
selectedCounty : undefined,
email : undefined,
});
},
actions: {
setEmail() {
var dataValue = this.get('currentModel.selectedCounty');
if(dataValue==="1"){
this.set('currentModel.email', "[email protected]");
}
else if(dataValue==="2"){
this.set('currentModel.email', "[email protected]");
}
else if (dataValue==="3"){
this.set('currentModel.email', "[email protected]");
}
else if (dataValue==="4"){
this.set('currentModel.email', "[email protected]");
}
else if (dataValue==="5"){
this.set('currentModel.email', "[email protected]");
}
else{
this.set('currentModel.email', "None Selected");
}
}
The HTML code I have (app/templates/demo.hsb):
<div>
<br>
Email:
<br>
{{input type="text" id="mail" value=model.email readonly='readonly'}}
</div>
<div>
<br>
Counties:
<br>
<select {{action 'setEmail' on='change'}}>
{{#x-select value=model.selectedCounty as |xs|}}
{{#xs.option value="0"}}Choose One{{/xs.option}}
{{#each model.counties as |county|}}
{{#xs.option value=county.value}}{{ county.display }}{{/xs.option}}
{{/each}}
{{/x-select}}
</select>
</div>
I haven't set-up the setEmail action correctly, as when I recently added the <select {{action 'setEmail' on='change'}}> line, the drop-down stopped functioning as I'm sure I did it incorrectly. I'm looking for a way to make this work, and I've read that Ember Observers would be a great way to go, but I haven't figured out how to utilize Observers yet, so some help with how that'd be done in this scenario would be greatly appreciated!
There is a much simpler way to handle select options in Ember (v1.13 or newer).
I removed the value field and added email directly to your object, you can see it here at this Ember twiddle.