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

trueにisEditingパラメータを設定する際にautofocus="autofocus"作品を使用して、次のようにコンポーネントのテンプレートです。ただし、アンカー要素が表示され、ユーザーがリンクをクリックすると、フォーカスは新しく表示された入力要素に転送されません。したがって、私の質問は：入力要素に焦点を当てる最良の方法は何ですか？ 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(); 
      }); 
     } 
}, 

奇妙なものtho。