lundi 23 mai 2016

Setting fields and getting Ember Observers to function correctly

I'm brand new to Ember, and have for the past few days been working on getting some simple HTML & JavaScript code to run with the Ember framework. I have built a page that is supposed to print out the longitude/latitude for an entered address, as well as fill a text-field with a specific email address; based on a selection from a drop-down menu. The code I have is as follows:

My JavaScript code; app/routes/demo.js

import Ember from 'ember';
var google = window.google; // jshint ignore:line

export default Ember.Route.extend({

  model() {
    var prepopulatedCounties = Ember.A();
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County1" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County2" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County3" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County4" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County5" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County6" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County7" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County8" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "County9" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "3", display: "County10" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "2", display: "County11" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "3", display: "County12" }));

    return Ember.Object.create({
      counties       : prepopulatedCounties,
      selectedCounty : undefined,
      address        : undefined,
      email          : undefined,
      latitude       : undefined,
      longitude      : undefined,
    });
  },

  actions: {
    codeAddress() {
      var geocoder = new google.maps.Geocoder();
      var address  = this.get('currentModel.address');
      alert("Address entered:" + address);

      geocoder.geocode( {'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK)
        { 
          var latitude  = results[0].geometry.location.lat();
          var longitude = results[0].geometry.location.lng();

          alert("Latitude: " + latitude + "Longitude: " + longitude);
          this.set('currentModel.latitude', latitude);
          this.set('currentModel.longitude', longitude);
        }
        else
        {
          alert("Geocode was not successful for the following reason: " + status);
        }
      }); 
    },

    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{
          this.set('currentModel.email', "None Selected");
      }
    }
  }
});

My HTML; app/templates/demo.hsb

<form name="myform">
    <div>
        Address:
        <br>
        
        <button class="button" >Code Address</button>
    </div>
    <div>
        <br>
        Latitude&emsp;&emsp;&emsp;&emsp;&emsp;Longitude:
        <br>
        
        
    </div>
    <br>
    <div>
        <br>
        Email:
        <br>
        
    </div>
    <div>
        <br>
        Counties:
        <br>

        
          Choose One
          
            
          
        
    </div>
</form>

My first question: When I run ember serve I'm able to see the page nicely, but when I enter an address, the text-fields for longitude/latitude does not get filled with anything (I do see the coordinates in the alert); how do I fill these fields properly?

Second question: I've been looking into Ember Observers, but do not fully understand how they work - in my case, how can I use an observer to set the email address to the email text-field when the selected county changes?

Thank you for helping!




Aucun commentaire:

Enregistrer un commentaire