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     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