将一个元素集中在Aurelia

Question

我想将焦点设置为表单元素.使用jQuery,这非常简单$('selector').focus.

我创建了一个简单的<input ref="xxx" id="xxx" type="text"> 在我的.ts文件中添加一个属性并在此处使用它:

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

什么都没发生.开始觉得一些简单的事情变得越来越困难,我肯定从来都不是重点.

(原始用例是在显示折叠时将焦点设置为Bootstrap折叠中的表单元素,如下所示:

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

这适用于我的基本HTML(不是单页应用程序),但不适用于Aurelia.Aurelia的方式是什么？

更新 使用下面的Miroslav Popovic的答案,并在评论中,我得到了它的工作(记住,这是一个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()因为focus()DOM元素上没有方法(编辑:显然现在有,但是Safari不支持它 - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus,谢谢@classicalConditioning).jQuery补充说.Aurelia创建的参考指向一个普通的DOM元素.要使其工作,您需要导入jQuery和wrap元素:

import $ from 'jquery';

// ...

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

无论如何,你应该避免在常规视图模型中使用jQuery.将它用于自定义元素和自定义属性是可以的,您需要与DOM交互或初始化一些jQuery插件.

focusAurelia中有一个自定义属性.您可以在Aurelia的博客文章中阅读更多相关信息.

基本上,它使您可以从视图模型中控制焦点.在你看来,你会有这样的:

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

在视图模型中:

attached() {
    this.hasFocus = true;
}

当然,您可能会将其用于更复杂的场景.即展开时聚焦输入collapse,或者将新项目添加到绑定的数组时repeat.for.

此外,focus属性实现双向绑定.在上面的示例中,它将相应地更改hasFocus属性的值.

Answer 2

对于元素未隐藏并且您希望在视图加载完成后它具有焦点的情况，您可以简单地添加focus.one-time="true"如下：

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