实现将焦点放置在添加的文本框

发布于 2015-08-18 16:43:08 | 137 次阅读 | 评论: 0 | 来源: 网络整理

问题

创建了一个Ember.TextField实例，希望在其被插入DOM后，当前焦点在该文本框上。

解决方案

继承Ember.TextField，并且定义使用.on('didInsertElement')标记的方法。在方法内调用组件的jQuery$的focus方法。

1
2
3
4
5

App.FocusInputComponent = Ember.TextField.extend({
  becomeFocused: function() {
    this.$().focus();
  }.on('didInsertElement')
});

组件模板：

1

Focus Input component!

1

{{focus-input}}

讨论

自定义组件提供了一个可以扩展原生的HTML元素，使其具有如自动对焦这样的功能。

App.FocusInputComponent是一个Ember.TextField的扩展组件，其中添加了一个becomeFocused方法。在组件被添加到DOM中之后，每一个Ember.js下的组件都可以访问对应的jQuery对象。这个对象包裹着组件的元素，并且提供了统一的、跨浏览器的接口来操作DOM，比如触发对焦。

因为只能在Ember.js组件被加入到DOM，才能使用这些DOM特性，因此需要收到加入DOM事件的通知。组件有一个didInsertElement事件，该事件在组件被加入到DOM中后被触发。

在缺省情况下，Ember.js扩展了原生的Function.prototype对象来包含一系列的附加函数，on函数就是其中的一个。通过on函数，可以以声明的方式来标记一个方法在指定的事件发生时被调用。在这个例子中，becomeFocused方法会在组件实例的didInsertElement发生时被调用。

设置Ember.EXTEND_PROTOTYPES属性为false，可以关闭prototype扩展。

示例

JS Bin