如何將輸入集中在訂閱上准備好在Meteor中使用FlowRouter

Question

在使用Iron Router並嘗試設置一些最佳實踐之后，我目前已經習慣使用FlowRouter。 我在模板級別訂閱我的收藏。

以前，我一直在等待使用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您的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()
});