让Ember Observers工作&设置文字字段

时间:2016-05-23 17:15:00

标签: javascript html ember.js observers

我是Ember的新手,并且在过去的几天里一直致力于获得一些简单的HTML&使用Ember框架运行的JavaScript代码。我已经构建了一个页面,用于打印输入地址的经度/纬度,以及用特定的电子邮件地址填写文本字段;基于下拉菜单中的选择。我的代码:

我的JavaScript代码;应用程序/路由/ 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");
      }
    }
  }
});

我的HTML;应用程序/模板/ demo.hsb

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

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

第一个问题:当我运行ember serve时,我能够很好地看到页面,但是当我输入一个地址时,经度/纬度的文本字段不会被任何东西填满(我确实看到了警报中的坐标);如何正确填写这些字段?

第二个问题:我一直在研究Ember Observers,但还没有完全掌握它们是如何工作的 - 在我的情况下,我怎样才能使用观察者将电子邮件地址设置为电子邮件文本字段选定的县改变了吗?

感谢阅读!希望有人可以找到问题,并帮助我开始使用Observers。

0 个答案:

没有答案