javascript - 在 ember 应用程序中设置焦点

Question

我希望能够将焦点设置到文本区域，因为鼠标单击不在该任务区域中。

作为一个最小的例子，假设我从一个文本开始，如果你点击它，它就会被一个文本字段替换。我可以通过 Handlebars 脚本实现这一点:

<script type="text/x-handlebars">
  {{#if isActive}}
  {{view Ember.TextField}}
  {{else}}
  <p {{action foo}}> Click Here to Enter text  </p>
  {{/if}}
</script>

有一个 Controller

App.ApplicationController = Ember.Controller.extend({
    isActive: false,
    foo: function(){
       this.set("isActive", true);
    }
});

这可以在点击时创建文本字段，但不会将焦点放在该文本区域(需要第二次点击才能真正输入文本)。

有什么好的方法可以达到这个目的吗？我可以通过在模板中设置一个 ID 并使用 jquery 选择它来做一些 hacky，但这似乎不够优雅。

Answer 1

此外，为了减少 didInsertElement 和 this.$().focus(); 这看起来好像您正在将 jQuery 混合到您的 Ember 模块中——还有一些我讨厌做的事情，您可以使用 Ember.JS 方法为 Ember.TextField 指定额外的属性。

我们可以指定我们对 HTML5 autofocus 属性感兴趣:

Ember.TextSupport.reopen({
  attributeBindings: ["autofocus"]
});

然后我们可以将标准的 Ember.TextField 放到我们的页面上，而无需创建另一个 View 来扩展 Ember.TextField:

{{view Ember.TextField autofocus="autofocus"}}

参见 JSFiddle:http://jsfiddle.net/MdzhN/