个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 22:58:36 25 4
gpt4 key购买 nike

我对 JS 很陌生，并且一直通过与我创建的小型 HTML 表单交互来练习 JS。我已经成功获得了我想要使用的功能。现在，我正在尝试使用 Ember 框架来实现我所拥有的功能。因此，我创建了一个基于输入位置的表单，查找并返回经度和纬度(我使用了 Google 地理编码)；我还创建了一个下拉菜单，根据所选选项，用特定的电子邮件地址填充文本字段。我的代码:

首先，我的 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 文件放入“Controller”文件夹中，并计划将 html 代码放入“template”文件夹内的 .hsb 文件中。

我的主要问题是，我需要在 HTML 表单中更改哪些内容才能使其在 Ember 中运行？感谢任何有关 Ember 的帮助或建议!

最佳答案

您还有更多工作要做，我将为您提供一个粗略的轮廓。

  1. 安装ember-cli(假设您已经安装了bower和node)。 (Link)
  2. 创建一个新的 ember 应用，ember new geoapp
  3. 为您的页面创建路由:embergenerateroutedemo
  4. 编辑在 app/templates/demo.hbs 创建的页面，并将您的 HTML 放入其中。在动态内容所在的地方使用 Handlebars 变量({{ model.counties }}、{{ model.email }} 等)。
  5. 将 JavaScript 放入路由 (app/routes/demo.js)
  6. 您的函数 codeAddress 和 setEmail 将是您的 route 的操作。
  7. 在您的 route 填充模型 Hook ，以返回包含县、地址、电子邮件、纬度、经度、selectedCounty 的模型。
  8. 将外部 JavaScript 包含在您的 app/index.html 中。这是您放置 Google map 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>

关于javascript - 让我的 JS 和 HTML 表单与 Ember.js 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37351492/

25 4 0
文章推荐： html - 如何水平和垂直居中表格文本？
文章推荐： C++ 错误 : Function 'get_time' could not be resolved - Ubuntu g++
文章推荐： html - 响应式页脚设计 - 包装页脚元素
文章推荐： c++ - 如何在显示屏的正中间显示内容？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com