emberのテキストボックスにフォーカスを設定js

Question

テキストをテキストボックスに変更しようとしています。ユーザーがテキストをクリックすると、テストボックスに変わり、コンテンツを編集することができます。私はそれをしました。私は以下のコードでフォーカスを設定することができます。

{{input value=animal.name autofocus=true}} 

これは初めての動作です。私がフォーカスアウトすると、テキストボックスは再びテキストコンテンツに変わります。再度テキストをクリックすると、テキストボックスが表示されますが、フォーカスがありません。以下は私が試しているコードです。

コンポーネントファイル：

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    isTextBox: false, 
    actions: { 
    editTest() { 
     this.set('isTextBox', true); 
    } 
    }, 
    focusOut() { 
    this.set('isTextBox', false); 
    }, 
}); 

テンプレートファイル：

{{yield}} 
<center><h2> 
<div onclick = {{action 'editTest'}}> 
{{#if isTextBox}} 
{{input value=animal.name autofocus=true}} 
{{else}} 
{{animal.name}} 
{{/if}} 
</div> 
</h2></center> 

私はエンバーに新しいですし、私はjQueryのを使用せずにフォーカスをやろうとしています。

ここはひねりhttps://ember-twiddle.com/d832c6540ba94901a6c42d5bb3cfa65e?openFiles=templates.components.text-input.hbs%2Ctemplates.components.text-input.hbsです。

Answer 1

あなたはあなただけでフォーカスを設定することができますkumkanillamの答えに展開するには、あなたはそれがすべてのレンダリングのためのテキストフィールドを集中させることができ、入力ヘルパーに

didRender(){  
    this.$('#cat-text').focus(); 
    } 

Answer 2

を

{{input id='cat-text' value=animal.name }} 

をIDを提供することができますテキストボックスをレンダリングする場合、レンダリングライフサイクルの終わり。コンポーネントには1つのテキスト入力しかないので、セレクタでそれを見つけることができます。ここではjQueryを使用することについて心配する必要はありません。それはEmberの方法です。

didRender(){ 
    if(this.get('isTextBox')){ 
    this.$('input[type=text]:first').focus(); 
    } 
}