如何在 Meteor 中使用 FlowRouter 将输入集中在 subscriptionsReady

Question

在使用 Iron Router 并尝试建立一些最佳实践后，我目前正在习惯使用 FlowRouter。我正在模板级别订阅我的 collection。

之前，我一直在等待使用 onRendered 呈现模板，然后定位我的输入字段并应用 focus()，但是我现在尝试仅在订阅时在 Blaze 中显示我的模板准备好使用以下内容（请原谅 Jade，但我认为在这种情况下很清楚）

template(name="subjectNew")

  unless Template.subscriptionsReady
   +spinner
  else
   form
    input(type="text" name="name")

基本思路是，在订阅准备就绪之前，微调器会显示。我遇到的问题是，现在即使模板呈现，焦点也不会应用。我已经尝试了多种将其包装在 autorun 调用中的方法，但不确定与此方法结合使用时尝试定位第一个字段的最佳方法？

Template.subjectNew.onRendered(function() {
  console.log('rendered');
  $('input').first().focus();
});

可能吗？

非常感谢任何想法。

Answer 1

我认为使用自动运行是一个很好的方法，但是您必须使用 Tracker.afterFlush() 来等待表单呈现后设置焦点。

类似于：

Template.subjectNew.onRendered(function() {
  this.autorun(() => {
    if (this.subscriptionsReady()) {
      Tracker.afterFlush(() => $('input').first().focus());
    }
  });
});

Answer 2

您的 subjectNew 被认为是 渲染的 即使它只显示微调器。坚持你的：

form
input(type="text" name="name")

进入一个单独的模板，然后将您的焦点代码附加到另一个模板的 onRendered 处理程序。

template(name="subjectNew")
  unless Template.subscriptionsReady
    +spinner
  else
    +myForm

template(name="myForm")  
  form
  input(type="text" name="name")

js:

Template.myForm.onRendered(function(){
  $('input').focus()
});

如何在 Meteor 中使用 FlowRouter 将输入集中在 subscriptionsReady

How to focus an input on subscriptionsReady using FlowRouter in Meteor

autofocus

meteor

flow-router