Skupienie elementu w Aurelia

Question

Chcę ustawić fokus na elemencie formularza. Z jQuery jest to takie proste, tylko $('selector').focus.

Stworzyłem prostą <input ref="xxx" id="xxx" type="text"> i złożyć moje .ts I dodać obiekt i użyć go tutaj:

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

Nic się nie dzieje. Zaczyna się czuć, że niektóre proste rzeczy stają się trudne, co na pewno nigdy nie miało sensu.

(przypadek oryginalne wykorzystanie było ustawić ostrość do elementu formularza wewnątrz upadku Bootstrap, gdy upadek jest pokazane, jak to:

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

który działa dla mojego podstawowego HTML (nie pojedynczy app strona) , ale nie z Aurelia. Jaki jest sposób Aurelia?

Aktualizacja Używanie odpowiedź od Miroslav Popovic poniżej, w komentarzach, mam go do pracy jak tak (należy pamiętać, że jest to składnik upadek Bootstrap):

<!-- 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() nie działa, ponieważ nie ma focus() metoda na elemencie DOM. jQuery dodaje to. Referencja stworzona przez Aurelia wskazuje na prosty element DOM. Aby to działało, trzeba by importować jQuery i owinąć elementu:

import $ from 'jquery'; 

// ... 

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

---

W każdym razie należy unikać przy użyciu jQuery w regularnych modeli widzenia. Można go używać do niestandardowych elementów i atrybutów niestandardowych, w których trzeba wchodzić w interakcje z DOM lub inicjować niektóre wtyczki jQuery.

Istnieje niestandardowy atrybut focus w Aurelia. Możesz przeczytać więcej na ten temat w this Aurelia's blog post.

Zasadniczo pozwala kontrolować ostrość z modelu widoku. Pana zdaniem, to masz to:

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

iw świetle modelu

attached() { 
    this.hasFocus = true; 
} 

oczywiście, prawdopodobnie będziesz używać, dla bardziej złożonych scenariuszy. To znaczy. skupić dane wejściowe po rozwinięciu collapse lub po dodaniu nowego elementu do tablicy powiązanej z repeat.for.

Ponadto atrybut focus implementuje wiązanie dwukierunkowe. W powyższym przykładzie zmieni on odpowiednio wartość właściwości hasFocus.

Answer 2

Dla sytuacji, gdy element nie jest ukryty i chcesz go mieć ostrość raz widok zakończeniu ładowania, można po prostu dodać focus.one-time="true" tak:

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