ember.js - EmberJs：在 init 函数中绑定来自 Ember.TextField 的输入元素（自动完成谷歌地图）

Question

我尝试使用 GoogleMap 自动完成组件。此 Google Javascript 服务只需绑定到输入字段即可。

我的想法是创建一个扩展 TextField 的新视图并按如下所述进行绑定：我对自动完成构造函数（this，option）中的“this”有疑问。正如您可以轻松理解的那样，这对我来说是输入组件......（错误可能在这里）

App.AutoCompleAddressView = Ember.TextField.extend({
  type: 'text',
  init: function() {
    this._super();
    var options = {
      types: ['(cities)'],
      componentRestrictions: {country: 'fr'}
    };
  autocomplete = new google.maps.places.Autocomplete(this, options);
  }
});

和html代码模板：

{{view App.AutoCompleAddressView}}

不幸的是，我收到了 Ember 错误： 未捕获的类型错误：对象没有方法“getAttribute”

Answer 1

如果 google.maps.places.Autocomplete 需要一个 DOM 元素，那么您必须将 this.$() 传递给它。我认为你必须在 didInsertElement 钩子中做到这一点。就像是：

App.AutoCompleAddressView = Ember.TextField.extend({
  type: 'text',
  didInsertElement: function() {
    var options = {
      types: ['(cities)'],
      componentRestrictions: {country: 'fr'}
    };
 //this.$() return the element as an array form, but google autocomplete seems to not accept this. So take the first one.
    new google.maps.places.Autocomplete(this.$()[0], options);
  }
});

添加了一个最小示例：http: //jsfiddle.net/6p6XJ/211/