Question

我对JS很陌生，并且通过与我创建的小型HTML表单进行交互来练习JS。我成功地获得了我尝试工作的功能。现在，我试图用Ember框架制作我的功能。所以我创建了一个基于输入位置的表单，查找并返回经度和纬度（我使用了Google Geocode）;我还创建了一个基于所选选项的下拉菜单，用特定的电子邮件地址填写文本字段。我的代码：

首先，我的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";
    }
}

其次，HTML表单：

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

我开始玩Ember并成功完成了快速入门指南等，但我并没有真正掌握html表单需要如何更改才能运行我的项目。到目前为止，我已将我的.js文件放在＆＃34; Controller＆＃34; -folder中，并计划将我的html代码放入＆＃34;模板＆＃34; -folder中的.hsb文件。

我的主要问题是，我需要在HTML表单中更改哪些内容才能在Ember中运行？任何有关Ember的帮助或建议都会受到赞赏！

Answer 1

你还有更多的工作要做，我会给你一个粗略的轮廓。

安装ember-cli（假设您已安装bower和node）。（Link）
创建一个新的余烬应用ember new geoapp
为您的网页创建路线：ember generate route demo
修改在app/templates/demo.hbs创建的页面并将HTML放入其中。在动态内容的位置使用把手变量（{{ model.counties }}，{{ model.email }}等）。
将您的JavaScript放入路线（app/routes/demo.js）
您的功能codeAddress和setEmail将成为您路线中的行动。
在路线中填充模型挂钩，返回包含县，地址，电子邮件，纬度，经度，selectedCounty的模型。
在app/index.html中加入外部JavaScript。这是您将脚本包含在Google maps api

以下是我认为您的路线会是什么样子的粗略轮廓：

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

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

粗略猜测你的模板（.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> <!-- This was the unclosed 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>

让我的JS和HTML表单与Ember.js一起使用

1 个答案: