LearningJS888 LearningJS888 - 6 months ago 20
HTML Question

Getting my JS and HTML form to work with Ember.js

I'm quite new to JS, and have been practicing JS by interacting with a small HTML form I created. I've successfully got the functionality that I was trying to work. Now, I'm trying to make what I have function with the Ember framework.
So I've created a form that based on an entered location, finds and returns the longitude and latitude (I used Google Geocode); I've also created a dropdown menu that based on the selected option, fills a text field with a specific email address. The code I have:

First, my JavaScript:

function codeAddress(){
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
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);
document.getElementById("latitude").value = latitude;
document.getElementById("longitude").value = longitude;
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}});
}
function setEmail(){
var county = document.getElementById("counties");
var selectedOption = county.options[county.selectedIndex];
var dataValue = selectedOption.getAttribute("data-value");
var textBox = document.getElementById("email");
if(dataValue==="1"){
textBox.value = "first@email.com";
}
else if(dataValue==="2"){
textBox.value = "second@email.com";
}
else if (dataValue==="3"){
textBox.value = "third@email.com";
}
else{
textBox.value = "None Selected";
}
}


Second, the HTML form:

<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript" src="GeoCoder.js"></script>
</head>
<h2>Google Geocoder</h2>
<form name="myform">
<div>
Address:
<br>
<input type="text" id="address" name="address">
<input type="button" value="Long/Lat" id="firstButton" onclick="codeAddress()">
</div>
<div>
<br>
Latitude&emsp;&emsp;&emsp;&emsp;&emsp;Longitude:
<br>
<input type="text" id="latitude" readonly>
<input type="text" id="longitude" readonly>
</div>
<br>
<div
<br>
Email:
<br>
<input type="text" id="email" readonly=>
</div>
<div>
<br>
Counties:
<br>
<select id="counties" onchange="return setEmail()">
<option data-value="0" value="Choose One">Choose One</option>
<option data-value="1" value="Charlotte">Charlotte</option>
<option data-value="1" value="Collier">Collier</option>
<option data-value="1" value="Hillsborough">Hillsborough</option>
<option data-value="1" value="Lee">Lee</option>
<option data-value="1" value="Manatee">Manatee</option>
<option data-value="1" value="Pasco">Pasco</option>
<option data-value="1" value="Pinellas">Pinellas</option>
<option data-value="1" value="Polk">Polk</option>
<option data-value="1" value="Sarasota">Sarasota</option>
<option data-value="3" value="Brevard">Brevard</option>
<option data-value="2" value="Broward">Broward</option>
<option data-value="3" value="Indian River">Indian River</option>
<option data-value="2" value="Martin">Martin</option>
<option data-value="2" value="Miami-Dade">Miami-Dade</option>
<option data-value="2" value="Monroe">Monroe</option>
<option data-value="2" value="Palm Beach">Palm Beach</option>
<option data-value="3" value="St Lucie">St Lucie</option>
</select>
</div>
</form>


I started playing around with Ember and have successfully completed the quick-start guide etc, but I don't really grasp how the html-form needs to change for my project to run. So far, I've put my .js file in the "Controller"-folder, and plan to put my html code into the .hsb file inside the "template"-folder.

My main question is, what do I need to change in my HTML form for it to function within Ember? Any help or suggestions about Ember are apprecited!

Answer

You have a little bit more work ahead of you, and I'll give you a rough outline.

  1. Install ember-cli (assuming you have bower and node already installed). (Link)
  2. Create a new ember app, ember new geoapp
  3. Create a route for your page: ember generate route demo
  4. Edit the page it created at app/templates/demo.hbs and put your HTML in there. Use handlebars variables ({{ model.counties }}, {{ model.email }}, etc.) in the place where dynamic stuff goes.
  5. Put your JavaScript in the route (app/routes/demo.js)
  6. Your functions codeAddress and setEmail would be actions in your route.
  7. Populate the model hook in your route to return a model with counties, address, email, latitude, longitude, selectedCounty.
  8. Include the external javascript in your app/index.html. This is where you put your script include for Google maps api

Here's a rough outline of what I think your route would look like:

// app/routes/demo.js
import Ember from 'ember';

export default Ember.Route.extend({

  // this is what will provide the model to your .hbs file
  model() {
    var prepopulatedCounties = Ember.A();
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Charlotte" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Collier" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Hillsborough" }));
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Lee" }));
    // snip...

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

  actions: {
    codeAddress() {
      var geocoder = new google.maps.Geocoder();  // jshint ignore:line
      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();

          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");
      }
    }
  }
});

And a rough guess on your template (.hbs):

{{!-- find me in app/templates/demo.hbs --}}
<form name="myform">
    <div>
        Address:
        <br>
        {{input type="text" name="address" value=model.address}}
        <button class="button" {{action "codeAddress"}}>Code Address</button>
    </div>
    <div>
        <br>
        Latitude&emsp;&emsp;&emsp;&emsp;&emsp;Longitude:
        <br>
        {{input type="text" value=model.latitude readonly='readonly'}}
        {{input type="text" value=model.longitude readonly='readonly'}}
    </div>
    <br>
    <div
        <br>
        Email:
        <br>
        {{input type="text" value=model.email readonly='readonly'}}
    </div>
    <div>
        <br>
        Counties:
        <br>

        {{!-- in order for this to work you must install emberx-select --}}
        {{!-- ember install emberx-select --}}
        {{#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}}
    </div>
</form>