ember.js - 插入 DOM 后的 ember 自动对焦组件

Question

我想显示一个输入字段，并在单击按钮后立即自动对焦。我还是 Ember 的新手，所以我不确定这是正确的方法，但我尝试将其包装为 ember 组件

模板

{{#if showCalendarForm}}
  {{new-calendar focus-out='hideNewCalendar' insert-newline='createCalendar'}}
{{else}}
  <button class="btn btn-sm btn-primary" {{action "showNewCalendar"}}>New</button>
{{/if}}

新日历组件 Handlebars :

<div class="input-group">
  {{input
    class       = 'form-control'
    id          = 'newCalendar'
    type        = 'text'
    placeholder = 'New calendar'
    value       = calendarName
    action      = 'createCalendar'
  }}
</div>

新日历组件js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

当我单击按钮时，会显示文本字段，但自动对焦和按 Enter 键不起作用

Answer 1

jQuery 的编写方式，您试图将焦点放在 <div class="input-group"> 上。 ，试试这个:

didInsertElement: function() {
    this.$('input').focus();
}

另一种方法是扩展 Ember.TextField:

export default Ember.TextField.extend({
  becomeFocused: function() {
    this.$().focus();
  }.on('didInsertElement')
});

然后，在您的新日历模板中，使用此组件:

{{focus-input
  class       = 'form-control'
  id          = 'newCalendar'
  type        = 'text'
  placeholder = 'New calendar'
  value       = calendarName
  action      = 'createCalendar'
}}

这样你就可以在任何需要的地方重用焦点输入组件。

至于按回车创建日历，我想你是想监听keyPress事件，检查是否是回车键，然后发送 Action 而不是尝试使用 insert-newline='createCalendar' .

//in FocusInputComponent

keyPress: function(e) {
  // Return key.
  if (e.keyCode === 13) {
    this.sendAction();
  }
}