如何将特定输入元素聚焦在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}}

控制器是:

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参数设置为true.但是,当锚元素可见,并且用户单击链接时,焦点将不会传输到新显示的输入元素.因此我的问题是:聚焦输入元素的最佳方法是什么？在里面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}}

我开始工作的方式是写一个这样的动作.

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

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

很奇怪的东西.