Question

我正在使用navigo.js来建立一个小网站。要求用户登录到目标网页上的帐户，然后在他们对帐户进行身份验证后将其路由到主模板。

页面对象从Firebase数据库中填充，因此我初始化一个类并将多个事件和页面元素绑定到原型方法，以便user firebase.auth()对象可以更容易地传递。 / p>

我可以在主索引页面上加载和登录。当页面更新模板时，事件处理程序会中断，因为登录页面上不存在元素（配置文件图片等）。当页面尝试更新事件（甚至HTML元素）时，引用错误会破坏页面加载。

更新

通过使用.then()并等待firebase承诺，我可以在验证后刷新页面并查看所有更新的数据。但是，初始路由仍然会引发参考错误，因为尚未创建元素。

authenticated.html模板

<!-- 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？

事件绑定路由器

0 个答案: