`Ember.run`を使って挿入した後に入力を選択します。

Question

が更新されました - Ember.runのif文で私の解決策に問題がありました。それを削除すると問題は解決しましたが、私のアプローチも間違っていました。レンダリング後にフォーカスをスケジュールする代わりに、私はacorncomが提案するようにカスタムコンポーネントを作成する必要があります。

オリジナル質問：

私は私のモデル上のアレイに基づいてテキスト入力のリストを構築しています。改行では、新しいテキストフィールドを挿入してそれを選択したいと思います。私はEmber.run.scheduleOnceでこれをやろうとしていますが、私が提供する関数は決して呼び出されません。

私は結合data-index属性を公開するためのテキストフィールドをリニューアルオープンしました、と私のテンプレート午前のレンダリングに：私のコントローラで

{{#each model.entries as |entry index|}} 
    {{input value=entry.text class='field--entry' data-index=index insert-newline=(action 'insertEntry' index)}} 
{{/each}} 

：

actions: { 
    insertEntry(index){ 
    // This works fine and a new textfield is added. 
    this.get('model.entries').addObject({text: 'Example'}); 

    if (index){ 
     Ember.run.scheduleOnce('afterRender', this, function(){ 
     // This doesn't seem to work at all. 
     console.log("This is never logged"); 
     $(".field--entry[data-index='" + index + 1 + "']").focus(); 
     }); 
    } 
    } 
} 

Answer 1

ここで作業中のブランチ（https://github.com/ember-best-practices/recommendations/blob/initial-pass/guides/run.md）につき、あなたは一般的に他がある場合afterRenderを使用しての明確な舵取りをしたいですより良く働くアプローチ。

コンポーネントのライフサイクルフックを使用して後で行うことができるように、コンポーネントのリストのレンダリングを処理することをお勧めします。ガイド（具体的にはdidRenderを議論するセクション）をチェックすると、後で実行しているものとよく似た例が表示されます。https://guides.emberjs.com/v2.17.0/components/the-component-lifecycle/#toc_making-updates-to-the-rendered-dom-with-code-didrender-code

Answer 2

テンプレート内の構文間違いがありました私はそれを修正した。私は、あなたのケースでは何とか何も言われなかったと思う。私はあなたのために準備したtwiddleをチェックできますか？それは単に新しいinputを追加し、それに焦点を当てることです。 jqueryフォーカスの選択ロジックを

Ember.$(`.field--entry:eq(${index+1})`).focus(); 

に変更しただけで、期待どおりに動作するようになりました。

Answer 3

私はあなたが手動でフォーカスを操作する必要はないと思います： このEmberは、レンダリング時にオートフォーカスアトリビュートを設定できます。 「（EQインデックス0）は、」最初の要素にこれをtrueに設定のみ

{{#each model.entries as |entry index|}} 
    {{input value=entry.text autofocus=(eq index 0)}} 
{{/each}}