Ein Element in Aurelia fokussieren

Question

Ich möchte den Fokus auf ein Formularelement setzen. Mit jQuery ist das so einfach, nur $('selector').focus.

Ich habe eine einfache <input ref="xxx" id="xxx" type="text"> erstellt und in meiner .ts Datei füge ich eine Eigenschaft und verwenden Sie es hier:

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

Nichts passiert. Beginne zu fühlen, dass einige einfache Dinge schwierig werden, was ich sicher nie der Punkt war.

(der ursprüngliche Anwendungsfall war in einem Bootstrap Zusammenbruch Fokus auf ein Formularelement zu setzen, wenn der Zusammenbruch, wie dies dargestellt ist:

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

Das ist für meine grundlegenden HTML funktioniert (nicht einzelne Seite app) , aber nicht mit Aurelia. Was der Aurelia Weg ist?

aktualisieren die Antwort von Miroslav Popovic mit unten, und in den Kommentaren, habe ich es wie so (denken sie daran zu arbeiten, das ist eine Bootstrap Zusammenbruch Komponente):

<!-- 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() funktioniert nicht, weil es keine focus() Methode auf DOM-Element ist. jQuery fügt das hinzu. Die von Aurelia erstellte Referenz verweist auf ein einfaches DOM-Element. Damit es funktioniert, müssen Sie jQuery und wickelt Element importieren:

import $ from 'jquery'; 

// ... 

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

---

Auf jeden Fall sollten Sie mit jQuery in regelmäßiger Ansicht Modellen vermeiden. Es ist in Ordnung, es für benutzerdefinierte Elemente und benutzerdefinierte Attribute zu verwenden, wo Sie mit DOM interagieren oder einige jQuery-Plugins initialisieren müssen.

Es gibt ein focus benutzerdefinierte Attribut in Aurelia. Sie können mehr darüber in this Aurelia's blog post lesen.

Im Grunde ermöglicht es Ihnen, den Fokus von Ihrem Ansichtsmodell zu steuern. Ihrer Ansicht nach hätte man dies:

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

Und im Hinblick Modell:

attached() { 
    this.hasFocus = true; 
} 

Natürlich werden Sie wahrscheinlich für eine komplexere Szenarien, dass. I.e. um eine Eingabe zu fokussieren, wenn collapse erweitert wird, oder wenn ein neues Element zu einem Array hinzugefügt wird, das an repeat.for gebunden ist.

Außerdem focus Attribut implementiert Zwei-Wege-Bindung. In obigem Beispiel wird der Wert der hasFocus Eigenschaft entsprechend geändert.

Answer 2

Für die Situation, in der das Element nicht verborgen ist, und Sie würden es Fokus haben möchten, sobald die Ansicht fertig geladen ist, können Sie einfach focus.one-time="true" wie so hinzufügen:

für

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