Aureliaに要素をフォーカスする

Question

フォーム要素にフォーカスを設定したいと思います。 jQueryを使用すると、これは簡単です。ちょうど$('selector').focusです。

私は、単純な<input ref="xxx" id="xxx" type="text"> を作成していると私の.TSは、ファイル内の私は、プロパティを追加し、ここでそれを使用します。

attached() { 
    this.xxx.focus() 
} 

何も起こりません。簡単なことが難しくなってきていると感じるようになり始めました。

// set focus to the first element when the add-cell collapse is shown 
$('#collapsedAddTask').on('shown.bs.collapse', function() { 
    $('#AddTaskTitle').focus() 
}) 

私の基本的なHTMLの作品（シングルないページアプリ）：

は、（元のユースケースは、崩壊はこのように、示されているブートストラップ崩壊内部のフォーム要素にフォーカスを設定することでしたしかし、オーレリアと。アウレリアの方法は何か？

更新 ミロスラフ・ポポヴィッチ以下からの回答を使用して、そのため（これはブートストラップ崩壊成分であり、覚えのようなコメントで、私はそれが動作するようになりました）：

<!-- the heading with an A that toggles visibility --> 
<div class="panel-heading"> 
    <a href="#collapsedAddTask" data-toggle="collapse" id="addTaskHeader" click.delegate="addTaskShown()">Add task</a> 
</div> 
<!-- the body, which is initially hidden --> 
<div class="panel-body"> 
    <div class="collapse" id="collapsedAddCell"> 
     <input type="text" focus.bind="addTaskFocused"> 
     <!-- more controls ... --> 
    </div> 
</div> 

Answer 1

this.xxx.focus() DOM要素にはfocus()方法がないため動作しません。 jQueryはそれを追加します。 Aureliaによって作成された参照は、プレーンなDOM要素を指しています。それを動作させるために、あなたはjQueryのをインポートし、要素をラップする必要があります：

import $ from 'jquery'; 

// ... 

attached() { 
    $(this.xxx).focus(); 
} 

---

とにかく、あなたは、通常のビューモデルではjQueryを使用しないでください。 DOMと対話したり、いくつかのjQueryプラグインを初期化したりする必要のある、カスタム要素やカスタム属性にも使用できます。

Aureliaにカスタム属性があります。focusがあります。 this Aurelia's blog postで詳細を読むことができます。

基本的に、ビューモデルからフォーカスを制御することができます。あなたのビューでは、これを持っているでしょう：

<input type="text" focus.bind="hasFocus" value.bind="..."/> 

とビューモデルに：もちろん

attached() { 
    this.hasFocus = true; 
} 

を、あなたはおそらく、より複雑なシナリオのためにそれを使用します。私。 collapseが展開されたとき、またはrepeat.forにバインドされた配列に新しい項目が追加されたときに入力をフォーカスすること。

また、focus属性は、双方向バインディングを実装します。上記のサンプルでは、​​それに応じてhasFocusの値が変更されます。状況については

Answer 2

要素が隠されていないと、ビューの読み込みが完了したら、それはフォーカスを持っているしたい場合は、あなたは、単にそのようなfocus.one-time="true"追加することができます。

<input 
    type="text" 
    class="form-control" 
    focus.one-time="true" 
    value.bind="email" 
    placeholder="email address">