Tôi có một lĩnh vực ember.js văn bản đơn giản và tôi đang cố gắng để thêm tự động lấy nétLàm thế nào để sử dụng lấy nét tự động với các mẫu ember.js?
{{view PersonApp.SearchField placeholder="search..." valueBinding="searchText"}}
PersonApp.SearchField = Ember.TextField.extend({
});
Tôi có thể thêm này trong javascript hoặc là đơn giản như một thuộc tính trong mẫu riêng của mình?
Cập nhật:
More phiên bản gần đây của Ember bây giờ có hỗ trợ cho việc này được xây dựng trong, vì vậy bạn không còn cần phải mở lại TextField để thêm một attributeBinding. Vào tháng năm 2014 (cam kết fdfe8495), bạn chỉ có thể sử dụng thuộc tính tự động lấy nét HTML5 trong mẫu của bạn:
{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}
Đây là một simple jsfiddle demonstration.
Giải pháp trước:
Bạn cũng có thể mở lại TextField để cho phép bạn liên kết các thuộc tính tự động lấy nét:
Ember.TextField.reopen({
attributeBindings: ['autofocus']
});
Và sau đó trong mẫu của bạn:
{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}
Câu trả lời này không hiệu quả đối với tôi. Tuy nhiên câu trả lời dưới đây bởi @rit dường như làm việc trong trường hợp của tôi. – Paul
Một lưu ý nhỏ. Tự động lấy nét Html5 chỉ hoạt động nếu bạn truy cập trang đó từ bên ngoài. Định tuyến đến trang từ trang khác của ứng dụng web emberjs của bạn sẽ không kích hoạt tính năng tự động lấy nét html5. (Ember.js 2.0 và phiên bản cũ hơn.) – Zoltan
Tự động lấy nét nghĩa là chúng tôi bắt đầu tập trung vào hộp văn bản ngay lập tức? Bạn muốn didInsertElement cho điều đó.
didInsertElement: function() {
this.$().focus();
}
Ngoài ra còn có các tùy chọn để sử dụng thuộc tính tự động lấy nét HTML5 trên TextField.
PersonApp.SearchField = Ember.TextField.extend({
attributeBindings: ['autofocus'],
autofocus: 'autofocus'
});
Xem thêm documentation on Mozilla Developer Network để biết thêm thông tin về lĩnh vực tự động lấy nét:
Câu trả lời hay, nhưng nói chung, w3schools không phải là nguồn thực sự chính xác. Xem http://w3fools.com/ –
cũng để tự động hoàn thành đủ tốt :) – rit
Tôi bọc phương pháp này trong một gói 1kb nhỏ để giải quyết này ngay cả một chút thanh lịch hơn, trực tiếp trong các mẫu, mà không cần bất kỳ mã hóa thêm:
<body>
<!-- all the libraries -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="http://rawgithub.com/AndreasPizsa/ember-autofocus/master/dist/ember-autofocus.min.js"></script>
<!-- your template -->
<script type="text/x-handlebars">
Hello, world! {{ input }}
:
: more elements here
:
{{ autofocus }}
</script>
<!-- your app -->
<script>
Ember.Application.create();
</script>
</body>
Các gói phần mềm là https://github.com/AndreasPizsa/ember-autofocus (hoặc trên bower install ember-autofocus). Thưởng thức!
Đây là bản sao của http://stackoverflow.com/q/9468061/90741 –