Tập trung vào một phần tử trong Aurelia

Question

Tôi muốn đặt tiêu điểm thành phần tử biểu mẫu. Với jQuery, điều này thật dễ dàng, chỉ cần $('selector').focus.

tôi đã tạo ra một đơn giản <input ref="xxx" id="xxx" type="text"> và nộp .ts tôi thêm một tài sản và sử dụng nó ở đây:

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

Không có gì xảy ra. Bắt đầu cảm thấy rằng một số điều dễ dàng đang trở nên khó khăn, điều mà tôi chắc chắn không bao giờ là vấn đề.

(trường hợp sử dụng ban đầu là để đặt trọng tâm vào một yếu tố hình thức bên trong một sự sụp đổ Bootstrap, khi sự sụp đổ được hiển thị, như thế này:

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

đó làm việc cho HTML cơ bản của tôi (ứng dụng trang không đơn) , nhưng không phải với Aurelia. cách Aurelia?

cập nhật Sử dụng câu trả lời từ Miroslav Popovic dưới đây là gì, và trong các ý kiến, tôi đã nhận nó làm việc như vậy (hãy nhớ, đây là một thành phần sụp đổ 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() không hoạt động vì không có phương pháp focus() trên phần tử DOM. jQuery thêm vào đó. Tham chiếu được tạo bởi Aurelia trỏ đến một phần tử DOM đơn giản. Để làm cho nó làm việc, bạn sẽ cần phải nhập khẩu jQuery và quấn phần tử:

import $ from 'jquery'; 

// ... 

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

---

Dù sao, bạn nên tránh sử dụng jQuery trong các mô hình điểm thông thường. Bạn có thể sử dụng nó cho các phần tử tùy chỉnh và các thuộc tính tùy chỉnh, nơi bạn cần tương tác với DOM hoặc khởi tạo một số plugin jQuery.

Có thuộc tính tùy chỉnh focus tùy chỉnh trong Aurelia. Bạn có thể đọc thêm về nó trong this Aurelia's blog post.

Về cơ bản, nó cho phép bạn kiểm soát tiêu điểm từ mô hình chế độ xem của mình. Theo quan điểm của bạn, bạn sẽ có điều này:

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

Và theo quan điểm của mô hình:

attached() { 
    this.hasFocus = true; 
} 

Tất nhiên, có thể bạn sẽ sử dụng cho một tình huống phức tạp hơn. I E. để tập trung đầu vào khi collapse được mở rộng hoặc khi mục mới được thêm vào mảng bị ràng buộc với repeat.for.

Ngoài ra, focus thuộc tính triển khai ràng buộc hai chiều. Trong ví dụ trên, nó sẽ thay đổi giá trị của thuộc tính hasFocus tương ứng.

Answer 2

Đối với các tình huống mà các phần tử không được ẩn đi và bạn muốn nó có tập trung khi xem đã tải xong, bạn chỉ có thể thêm focus.one-time="true" như vậy:

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