は常にビューモデル次を考える

Question

動作しないの結合を介して集束素子

<template> 

    <div class="expanded-input wrapper"> 
     <input focus.trigger="toggle()" /> 

     <textarea if.bind="expanded" 
        focus.bind="expanded" 
        blur.trigger="toggle()" 
        rows="4"> 
     </textarea> 
    </div> 

</template> 

行動であること/それ以外の入力を焦点に私が最初に/タブをクリックすると、 textarea要素が表示され、フォーカスされています。次に、テキストエリアがフォーカスを失うように、別の場所をクリックします。今度は再び入力をクリックすると、テキストエリアが表示されますが、フォーカスされません（入力エレメントは）。

html要素は、初めてでなく、常に一貫して動作することが期待されています。

2つの注釈：if.bind expressionを削除すると動作します。私はif.bindを使用せずにこの問題を回避し、その代わりにCSSクラスをバインドして、class="${expanded ? 'show' : 'hide'}"のような要素を表示/非表示にしましたが、以前のように動作するはずはないと思います。テキストエリアのフォーカス状態積極として

Answer 1

は、そのfocus/blurイベントリスナーが同様に分離されるレンダリングを（DOMからそれを切り離し）変えるので、彼らは初回のみ動作します。 the docsから

：

[＆hellip;] ifはDOMから完全要素を削除し、show要素の可視性を制御aurelia-hide CSSクラスをトグルします。

ではなくifのshow条件を使用し、（再）結合リスナーを心配することなく、これを避けるために。