ember.js - 如何在 Ember 2 中聚焦特定的输入元素

Question

我正在学习 Ember 2，并试图编写一个简单的内联编辑器。我的问题是自动聚焦输入元素。组件的模板如下:

{{#if isEditing}}
    {{input type="text" placeholder="Line item" autofocus="autofocus" value=value class="form-control" focus-out="save"}}
{{/if}}
{{#unless isEditing}}
    <a href="#" {{action "toggleEditor"}}>{{value}}</a>
{{/unless}}

Controller 是:

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        toggleEditor: function () {
            this.set('isEditing', !this.get('isEditing'));
        },
        save: function () {
            var object = this.get('object');
            var property = this.get('property');
            object.set(property, this.get('value'));
            var promise = object.save();
            promise.finally(() => {
                this.send('toggleEditor');
            });
        }
    }
});

使用 autofocus="autofocus"设置 isEditing 时有效参数为真。但是，当 anchor 元素可见，并且用户单击链接时，焦点不会转移到新可见的输入元素。因此，我的问题是:聚焦输入元素的最佳方式是什么？内 toggleEditor ，如何通过 ID 访问输入元素以及如何使用 Ember 聚焦它？

Answer 1

有一个更好的方法来切换属性。

this.toggleProperty('propertyName');

还可以考虑使用 if/else。

{{#if isEditing}}
    {{input type="text" placeholder="Line item" class="my-input"}}
{{else}}
    <a href="#" {{action "toggleEditor"}}>{{value}}</a>
{{/if}}

我让它工作的方式是写一个这样的 Action 。

toggleIsEditing: function() {
        this.toggleProperty('isEditing');

        if(this.get('isEditing')) {
            Ember.run.scheduleOnce('afterRender', this, function() {
                $('.my-input').focus();
            });  
        }
},

奇怪的东西。