EmberJs:在init函数中绑定来自Ember.TextField的输入元素(自动完成谷歌地图)

Question

我尝试使用GoogleMap Autocomplete组件.此Google Javascript服务只需绑定到输入字段即可.

我的想法是创建一个新的View扩展TextField并按照下面的描述进行绑定:我对Autocomplete构造函数中的"this"有疑问(this,option).你可以很容易地理解,这对我来说是输入组件......(这可能是错误)

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错误: Uncaught TypeError:Object没有方法'getAttribute'

Answer 1

如果google.maps.places.Autocomplete需要一个DOM元素,那么你必须将它传递给它.$().我想你已经在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/