mardi 24 mai 2016

Trigger observer based on changed selection in drop-down - Ember.js

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', "first@email.com");
      }
      else if(dataValue==="2"){
          this.set('currentModel.email', "second@email.com");
      }
      else if (dataValue==="3"){
          this.set('currentModel.email', "third@email.com");
      }
      else if (dataValue==="4"){
          this.set('currentModel.email', "forth@email.com");
      }
      else if (dataValue==="5"){
          this.set('currentModel.email', "fifth@email.com");
      }
      else{
          this.set('currentModel.email', "None Selected");
      }
    }

The HTML code I have (app/templates/demo.hsb):

<div>
        <br>
        Email:
        <br>
        
    </div>
    <div>
        <br>
        Counties:
        <br>

        <select >
        
          Choose One
          
            
          
        
        </select>
    </div>

I haven't set-up the setEmail action correctly, as when I recently added the <select > 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!




Aucun commentaire:

Enregistrer un commentaire