如何檢查賬戶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); 
    }); 
}); 

上述黑客本地工作（可能是因爲它加載速度更快），但是當我推不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功能已經非常令人誤解。