Ember.js 余烬：在一个领域设置焦点的简单方法_Ember.js

Ember.js 余烬：在一个领域设置焦点的简单方法

ember.js

Ember.js 余烬：在一个领域设置焦点的简单方法,ember.js,Ember.js,我正在寻找一种简单的方法来设置一个文本字段或文本区域的焦点。我不喜欢将Jquery语法与Ember语法混合使用。。。我不喜欢为我想要设置焦点的每个文本字段或文本区域创建单独的视图有什么建议吗我的文本区域字段是： {{view Ember.TextArea valueBinding="body" placeholder="body"}} 谢谢 Marc在文本区域设置焦点最简单的方法如下： App.FocusTextArea = Ember.TextArea.extend({ didIns

我正在寻找一种简单的方法来设置一个文本字段或文本区域的焦点。我不喜欢将Jquery语法与Ember语法混合使用。。。我不喜欢为我想要设置焦点的每个文本字段或文本区域创建单独的视图

有什么建议吗

我的文本区域字段是：

{{view Ember.TextArea valueBinding="body" placeholder="body"}}

谢谢

Marc

在

文本区域设置焦点最简单的方法如下：
App.FocusTextArea = Ember.TextArea.extend({
  didInsertElement: function() {
    this._super(...arguments);
    this.$().focus();
  }
});

无论何时，只要您想要这样的视图，您都可以像这样使用它：
{{view App.FocusTextArea valueBinding="body" placeholder="body"}}

我不喜欢为我想要设置焦点的每个文本字段或文本区域创建单独的视图
通过创建从Ember.TextArea
扩展的自定义TextArea
视图，您并不是每次创建新视图时，都在以所需的行为重用自定义视图
希望能有所帮助。
这个小软件包更进一步，直接在模板中实现，更优雅，无需进一步编码或子类化：
<body>
  <!-- all the libraries -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
  <script src="http://rawgithub.com/AndreasPizsa/ember-autofocus/master/dist/ember-autofocus.min.js"></script>
  <!-- your template -->
  <script type="text/x-handlebars">
    Hello, world! {{ input }}
    :
    : more elements here
    :
    {{ autofocus }} {# <<<<< does the magic #}
  </script>
  <!-- your app -->
  <script>
    Ember.Application.create();
  </script>
</body>


你好，世界！{{input}}
:
：这里有更多元素
:
{{autofocus}}{#使用新的Ember CLI，您只需在template*.hbs中使用autofocus=“autofocus”
即可实现此功能
{{input value=text type="text" name="text" placeholder="Enter text" autofocus="autofocus"}}

您可以创建一个封装输入
字段的组件
，并使用didInsertElement
钩子聚焦内部输入
：
在模板中：
// template.hbs
{{#focus-input}}
  {{input type="text"}}
{{/focus-input}}

您的组件：
// components/focus-input.js
import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement () {
    this.$('input').focus();
  }
});

对我来说，这很有帮助

咖啡
import FocusableComponent from 'ember-component-focus/mixins/focusable-component'
export default Ember.Component.extend FocusableComponent,
  actions:
    show: () ->
      @set 'AddCardMode', true
      @focusAfterRender "#1"

模板、标志
if AddCardMode
  something input id=1

清晰而简单的解决方案Thx。MarcWorks很棒，Thx。一个奇怪之处是，如果输入一开始是空的，它就不起作用。另一个奇怪之处是，如果输入被插入到dom中，被删除，然后在第二次插入时再次插入，它就不会自动聚焦。这只是将属性代理到依赖于DOMCon的html元素tentLoaded事件。这就是为什么它只在第一次输入时发生一次，直到您加载页面：“这似乎在2.13中不起作用”-更具体地说，我有一个“注册”路由（输入自动聚焦），然后转换到“登录”路由，其中有类似的输入（不同的名称/id）（不自动聚焦）只需执行类似于{{input id=“id”initially focused}}
之类的操作就好了。我想您可以扩展输入助手来跳过嵌套。