Ember.js 输入仅在第一次自动聚焦

我仍在学习Ember，在模板中显示/隐藏某些元素时遇到了保持一致行为的问题。我有以下控制器

import Ember from 'ember';

export default Ember.ArrayController.extend({

  actions: {

    newCalendar: function() {
      this.set('showCalendarForm', true);
    },

    hideNewCalendar: function() {
      this.set('showCalendarForm', false);
      this.set('calendarName', '');
    },
    showCalendarForm: false,

    createCalendar: function() {
      var name = this.get('calendarName');

      if (!name) { return; }
      if (!name.trim()) { return; }

      var calendar = this.store.createRecord('calendar', {
        name: name
      });

      this.set('calendarName', '');
      this.set('showCalendarForm', false);
      calendar.save();
    },
  }

});

和一个模板

{{#if showCalendarForm}}
        <div class="input-group">
          {{input
            class       = 'form-control'
            id          = 'newCalendar'
            type        = 'text'
            placeholder = 'New calendar'
            value       = calendarName
            autofocus   = 'autofocus'
            focus-out   = 'hideNewCalendar'
            action      = 'createCalendar'
          }}
        </div>
      {{else}}
        <button class="btn btn-sm btn-primary" {{action "newCalendar"}}>New</button>
      {{/if}}

{{{#if showCalendarForm}
{{输入
类='窗体控件'
id='newCalendar'
类型='text'
占位符='新日历'
值=日历名称
自动对焦='自动对焦'
聚焦输出='hideNewCalendar'
操作='createCalendar'
}}
{{else}
刚出现的
{{/if}

---

问题是，只有在我第一次单击按钮时，输入字段才会自动聚焦，在随后的单击中，输入才会显示，但不会自动聚焦。如何解决此问题？

我怀疑动态添加带有

自动聚焦

属性的输入元素是否会导致可靠的行为，因为此属性旨在在页面加载时自动聚焦（=加载页面时标记中存在元素）。W3C:“

自动聚焦内容属性允许作者在加载页面时指示控件将被聚焦，允许用户只需开始键入，而无需手动聚焦主控件。

”有什么想法吗？让输入=组成为自定义视图。并将输入集中在视图的“didInsertElement”钩子中。的可能重复项