Fokussierelement über die Bindung immer

Question

nicht funktioniert

folgende Ansicht Modell Gegeben:

export class ExpandingInput { 
    // ctor 
    constructor() { 
     this.expanded = false; 
    } 

    // actions 
    toggle() { 
     this.expanded = !this.expanded; 
    } 
} 

und Vorlage:

<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> 

Das Verhalten ist, dass wenn ich auf/Tab zuerst in/ansonsten den Eingabefokus Element, das TextArea Element erscheint und ist fokussiert. Dann klicke ich woanders hin, so dass der Textbereich den Fokus verliert. Wenn ich nun wieder auf die Eingabe klicke, erscheint der Textbereich, ist aber nicht fokussiert (Eingabeelement ist).

Erwartete/gewünschte Verhalten wäre für die HTML-Elemente konsequent verhalten sich immer auf, nicht nur auf der ersten Zeit :).

Zwei Anmerkungen: Wenn ich die if.bind expression entfernen, es funktioniert. Ich ging um dieses Problem herum, indem ich if.bind nicht verwendete und stattdessen css Klassen verbinde, um Element wie das class="${expanded ? 'show' : 'hide'}" zu verstecken/zu zeigen, aber ich denke nicht, dass der ehemalige so arbeiten sollte, wie es jetzt ist.

Answer 1

als Fokuszustand der TextArea- aktiv verändert das Rendering (löst es aus dem DOM), sein focus/blur Ereignis-Listener als auch abgelöst werden, so dass sie nur das erste Mal arbeiten.

Von the docs:

[& hellip;] if entfernt das Element vollständig aus dem DOM und show schaltet die aurelia-hide CSS-Klasse, die die Sichtbarkeit des Elements steuert.

Um dies zu vermeiden, ohne sich um (Wieder-) Bindung Zuhörer kümmern, die show bedingten statt if verwenden.