Question

这是我的模板：

<div class="form-group">
  <label class="control-label" for="contact_email">Email address</label>
  {{
    input
    type="email"
    class="form-control"
    id="contact_email"
    placeholder="user@gmail.com"
    value=emailAddress
    autofocus="autofocus"
  }}
</div>
<button class="btn btn-primary btn-lg" disabled={{isSubmitButtonDisabled}} {{action 'saveEmail'}}>Submit</button>
{{#if responseMessage}}
   <div class="alert alert-success">{{responseMessage}}</div>
{{/if}}

这是控制器：

import Controller from '@ember/controller';
import { match, not } from '@ember/object/computed';

export default Controller.extend({
  emailAddress: '',
  responseMessage: '',
  isEmailValid: match('emailAddress', /^.+@.+\..+$/),
  isSubmitButtonDisabled: not('isEmailValid'),
  resetForm() {
    this.set('emailAddress', '');

    // focus email input field
  },
  actions: {
    saveEmail() {
      this.set(
        'responseMessage',
        'We got your email and we’ll get in touch soon'
      );

      this.resetForm();
    }
  }
});

除了控制器document.querySelector()之外，是否有任何正确的方法可以获取对控制器内部电子邮件输入字段的引用，所以我可以将其重点放在其中？

Answer 1

您可以通过传递ID道具来定义应用于您要关注的输入的ID。
如果您在组件中，则可以将组件的ID连接到输入的名称。

在componentjs中构建ID，并将其传递到输入字段的ID属性中。

refocusId: Ember.computed(function(){
    return `${this.get('elementId')}-someValue`; 
})
//HBS
id=refocusId

添加一个采取该新属性并专注于该属性的操作。

refocus(){
  let element = document.getElementById(this.get('refocusId'));
  if (element) {
      element.focus();
  }
}

我有一个working example in twiddle，您可以看到。

我强烈建议生成您在组件中使用的ID。否则，您可能会不小心两次使用相同的ID。

编辑：由于您在控制器中，因此您将无法像在组件中那样访问elementId。实际上，您无权访问可以使用的公共属性或方法。因此，只要在路由控制器中执行此操作，就可以在路由文件中使用setupController方法+路由名称。

setupController(controller, model) {
    let refocusId = `${this.get('routeName')}-someValue`;
    controller.set('refocusId', `${this.get('routeName')}-someValue`);
}

可以完成此操作，而无需对控制器进行任何其他更改。

如何在控制器内部的元素上触发焦点事件？

1 个答案: