Связывание событий с маршрутизатором

Question

Я использую navigo.js для небольшого сайта.Пользователей просят войти в учетную запись на целевой странице и затем направить их в основной шаблон после проверки подлинности своей учетной записи.

Объекты страницы заполняются из базы данных Firebase, поэтому я инициализирую класс ипривязать несколько событий и элементов страницы к методам-прототипам, чтобы объект user из firebase.auth() можно было легко передавать.

Я могу загрузить и войти в систему на главной странице индекса.Когда страница обновляет шаблон, обработчики событий перестают работать, поскольку на странице входа в систему отсутствуют элементы (изображение профиля и т. Д.).Когда страница пытается обновить события (или даже элементы HTML), ссылочные ошибки нарушают загрузку страницы.

Обновление

С помощью .then() и ожиданием пожарной базыобещаю, я могу обновить страницу после аутентификации и увидеть все данные обновлены.Тем не менее, первоначальная маршрутизация по-прежнему генерирует ошибки ссылок, поскольку элементы еще не созданы.

authenticated.html template

<!-- language: lang-html -->
<div class="user-view">
  <img id="user-pic" class="circle" src="" />
  <button id="sign-out-button" class="waves-effect waves-light btn blue">Sign-out</button>
  <div id="string-name" class="white-text name"></div>
  <div id="user-email" class="white-text email"></div>
</div>

main.js

function MainObj() {
  this.userPic = document.getElementById('user-pic');
  this.stringName = document.getElementById('string-name');

  this.initFirebase()
}

MainObj.prototype.initFirebase = function() {
  this.auth = firebase.auth();

  this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
}

MainObj.prototype.signIn = function() {
  var provider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithPopup(provider).then(user => {
    // This navigates after login, but elements still throw reference errors without a full page refresh
    router.navigate('main');
  });
}

MainObj.prototype.onAuthStateChanged = function(user) {
  // user is signed in
  if(user) {
    router.navigate('main') // route from root to main template
    this.userPic.setAttribute('src', user.photoURL);
    this.stringName.textContent = user.displayName;
  } else {
    router.navigate('login') // route back to login
  }
}

Ошибка:

Uncaught (in promise) TypeError: Cannot read property 'addEventListener' of null

Есть ли способ динамической загрузки сценариев с файлами шаблонов, чтобы DOM заполнялся до выполнения сценария