如何检查客户端上是否加载了Accounts UI小部件？

Question

默认的Accounts-UI小部件需要一段时间才能加载。我想在客户端准备就绪时检查它，以便我可以在之后执行一些DOM操作。我目前正在使用这样的计时器：

Template.sign_in_modal.onRendered(function (){
  Tracker.afterFlush(function () {
    Meteor.setTimeout(function () {
        $('a#login-sign-in-link').click();
        $('a#login-name-link').click();   
        $('a.login-close-text').remove();       
    }, 100);
  });
});

上面的hack在本地工作（可能是因为它加载速度更快），但是当我推送到saturnapi.com时却没有。我只是希望它默认扩展，如下所示。有没有办法确保UI小部件通过模板助手完全加载，或者默认情况下扩展它？

Answer 1

我建议检查何时将<a id="login-sigin-in-link"></a>添加到DOM中。这可以通过检查$('a#login-sign-in-link').length来验证。如果元素在DOM上进行操作。

然而，如果不是在几毫秒内再次检查。我建议使用setInterval()。

请参阅下面的完整解决方案：

Template.sign_in_modal.onRendered(function (){
  var setIntervalId = Meteor.setInterval(function() {
    if($('a#login-sign-in-link').length) {
      $('a#login-sign-in-link').click();
      $('a.login-close-text').remove();
      Meteor.clearInterval(setIntervalId);
    }
  }, 100);
});

Template.sign_in_modal.onDestroyed(function() {
  $('.modal-backdrop.fade.in').remove();
});

有些人可能认为使用loginButtons.onRendered(function(){});是验证元素是否已添加到DOM的好方法，但事实并非如此。如果您尝试在onRendered中执行相同的DOM操作，则会抛出afterFlush error。 onRendered函数极具误导性。