4

私は 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');
            });
        }
    }
});

パラメータをtrueautofocus="autofocus"に設定すると、使用が機能します。isEditingただし、アンカー要素が表示されているときにユーザーがリンクをクリックしても、フォーカスは新しく表示された入力要素に移動しません。したがって、私の質問は次のとおりです。入力要素に焦点を当てる最良の方法は何ですか? 内部toggleEditorでは、ID で入力要素にアクセスする方法と、Ember を使用してそれをフォーカスする方法を教えてください。

4

1 に答える 1

9

プロパティを切り替えるより良い方法があります。

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();
            });  
        }
},

変なものだけど。

于 2016-04-08T10:12:26.230 に答える