HTML 对象 "list" 在站点之间切换后未更新

Question

我要达到什么目的：

我正在使用 HTML 和 Javascript 创建简单的 Firebase 项目，其中应用程序的目的是创建共享的数据列表具有特定“家庭”的用户。

哪里有问题:

当我登录时，我的应用会转到“main.html”网站加载正常，我可以看到从 firebase 下载的实际项目进入 ID 为“list”的 HTML 对象。然后当我点击注销按钮时 – 再次一切都很好。
问题出现在我重新登录时（在第一次使用按钮注销之后）。我被转移到网站 “main.html” 但列表没有更新……我可以在控制台中看到我成功地从 Firebase 下载了数据。唯一的问题是 HTML 未更新。

如果您能指出我可以找到答案或指出问题的地方，我将不胜感激！已经尝试在互联网上搜索“HTML list is not updating”和类似的搜索，但找不到任何内容。

我也试过在第 25 行将 "let" 换成 "var"。没有发现任何差异。

“main.html” 和首次登录后的控制台：

“main.html”和第二次登录后的控制台（如您在控制台中看到的，数据已成功从 Firebase 下载 - 但 HTML 未成功下载更新):

最小可重现代码：

<!DOCTYPE html>
<html>
    <head>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>

    <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-database.js"></script>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      //MY FIREBASE CONFIG DATA
    };
    //Other vars.
    var currentPage = "register.html";
    let myListener;
    var email, family, password;

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    var auth = firebase.auth();
    var db = firebase.database();

    function login(){
        firebase.auth().signInWithEmailAndPassword(email, password).then(function(user){
                // user signed in
                goToPage('main.html'); 

                firebase.database().ref('/users/' + auth.currentUser.uid).once('value').then(function(snapshot) {
                    family = snapshot.val().family;
                    addDataListener();
                });

            }).catch(function(error) {

                // Handle Errors here.
                var errorCode = error.code;
                console.log(errorCode);

                if (errorCode){
                    ons.notification.alert('Error!');
            }
        });
    }

    function logout(){
        goToPage('login.html'); 

        firebase.auth().signOut().then(function() {
            console.log("I just log out");
            }, function(error) {
             console.log("Some error: ", error);
        });    
    }

    function addDataListener(){
        console.log("Listener is set up!");

        myListener = firebase.database().ref('families/' + family).on('value', function(snapshot) {
            if (currentPage !== "main.html") return;
            console.log(snapshot.val());

            var list = document.getElementById('list'); 

            //Empty list
            while (list.hasChildNodes()) {  
                list.removeChild(list.firstChild);
            }

            //Read all items in firebase and add them to the list
            Object.keys(snapshot.val()).forEach(function(k){
                console.log(k + ' - ' + snapshot.val()[k]);

                var onsItem = document.createElement('ons-list-item');    
                onsItem.innerHTML = snapshot.val()[k]; 
                onsItem.setAttribute('id', k);
                list.appendChild(onsItem);  
            });

        });
    }

    function goToPage(newPage){
        currentPage = newPage;

        var myNavigator = document.getElementById('myNavigator');
        myNavigator.pushPage(newPage);   
    }
    </script>



    </head>

    <body>
    <ons-navigator swipeable id="myNavigator" page="login.html"></ons-navigator>


    <template id="login.html">
    <ons-page id="login">
    <!--Page name-->
        <ons-toolbar>
          <div class="center">Login page</div>
        </ons-toolbar>

    <!--Inputs-->    
    <ons-list>       
        <ons-list-item tappable>
            <div class="center">
            Email: 
                <ons-input id="email_login" type="email" onchange = "email = this.value"></ons-input>
            </div> 
        </ons-list-item>   

        <ons-list-item tappable>
            <div class="center">
            Password: 
                <ons-input id="password_login" type="password" onchange = "password = this.value"></ons-input>
            </div> 
        </ons-list-item>
    </ons-list>

    <!--Buttons -->  
        <p style="text-align: center"> <ons-button modifier="material" id="login" onclick="login();">Login</ons-button> </p>

    </ons-page>
    </template>

    <template id="main.html">
    <ons-page id="main">
    <!-- Page name -->
        <ons-toolbar>
          <div class="center">Main page</div>
        </ons-toolbar>

    <!--List-->
        <ons-list id="list"></ons-list>

    <!--Buttons -->  
        <p style="text-align: center"> <ons-button modifier="material" id="logout" onclick="logout();">Log out</ons-button> </p>

    </ons-page>
    </template>
    </body>
</html>

Answer 1

我试了一下代码，做了 2 处小改动。

事情是 addDataListener() 在 myNavigator.pushPage

之后运行

另外 myNavigator.replacePage 直接将 pages/section 添加到 DOM 而不是替换它们。这导致 #list 元素呈现在旧页面而不是新页面上（id 应该是唯一的）所以我将其替换为 myNavigator.replacePage

现在似乎有效

goToPage('main.html')
          .then(_ => {
            firebase.database().ref('/users/' + auth.currentUser.uid).once('value').then(function(snapshot) {
              family = snapshot.val().family;
              addDataListener();
            });
          })

 function goToPage(newPage) {
      currentPage = newPage;

      var myNavigator = document.getElementById('myNavigator');
      return myNavigator.replacePage(newPage);
    }

var currentPage = "register.html";
let myListener;
var email, family, password;

const mockFirebase = {
  initializeApp: () => {},
  auth() {
    return {
      currentUser: {
        uid: 1
      },
      signInWithEmailAndPassword: () => Promise.resolve({}),
      signOut: () => Promise.resolve()
    }
  },
  database() {
    return {
      ref(path) {
        let value = {
          family: 'One'
        }
        if (path.includes("families")) {
          value = ['One', 'Two', 'Three']
        }

        return {
          once: () => Promise.resolve({
            val: () => value
          }),
          on: (prop, callback) => callback({
            val: () => value
          })
        }
      }
    }
  },
}

window.firebaseConfig = {}
window.firebase = mockFirebase;

firebase.initializeApp(firebaseConfig);
var auth = firebase.auth();
var db = firebase.database();

function login() {
  firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {

    goToPage('main.html')
      .then(_ => {
        firebase.database().ref('/users/' + auth.currentUser.uid).once('value').then(function(snapshot) {
          family = snapshot.val().family;
          addDataListener();
        });
      })

  }).catch(function(error) {

    var errorCode = error.code;
    console.log(errorCode);

    if (errorCode) {
      ons.notification.alert('Error!');
    }
  });
}

function logout() {
  goToPage('login.html');

  firebase.auth().signOut().then(function() {
    console.log("I just log out");
  }, function(error) {
    console.log("Some error: ", error);
  });
}

function addDataListener() {
  console.log("Listener is set up!");

  myListener = firebase.database().ref('families/' + family).on('value', function(snapshot) {
    if (currentPage !== "main.html") return;
    console.log(snapshot.val());

    var list = document.getElementById('list');

    while (list.firstChild) {
      list.removeChild(list.firstChild);
    }
    Object.keys(snapshot.val()).forEach(function(k) {
      console.log(k + ' - ' + snapshot.val()[k]);

      var onsItem = document.createElement('ons-list-item');
      onsItem.innerHTML = snapshot.val()[k];
      onsItem.setAttribute('id', k);
      list.appendChild(onsItem);
    });

  });
}

function goToPage(newPage) {
  currentPage = newPage;

  var myNavigator = document.getElementById('myNavigator');
  return myNavigator.replacePage(newPage);
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-database.js"></script>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <ons-navigator swipeable id="myNavigator" page="login.html"></ons-navigator>


  <template id="login.html">
    <ons-page id="login">
    <!--Page name-->
        <ons-toolbar>
          <div class="center">Login page</div>
        </ons-toolbar>

    <!--Inputs-->    
    <ons-list>       
        <ons-list-item tappable>
            <div class="center">
            Email: 
                <ons-input id="email_login" type="email" onchange = "email = this.value"></ons-input>
            </div> 
        </ons-list-item>   

        <ons-list-item tappable>
            <div class="center">
            Password: 
                <ons-input id="password_login" type="password" onchange = "password = this.value"></ons-input>
            </div> 
        </ons-list-item>
    </ons-list>
        <p style="text-align: center"> <ons-button modifier="material" id="login" onclick="login();">Login</ons-button> </p>
    </ons-page>
    </template>
  <template id="main.html">
    <ons-page id="main">
        <ons-toolbar>
          <div class="center">Main page</div>
        </ons-toolbar>
        <ons-list id="list"></ons-list>
        <p style="text-align: center"> <ons-button modifier="material" id="logout" onclick="logout();">Log out</ons-button> </p>

    </ons-page>
    </template>
</body>

</html>

HTML 对象 "list" 在站点之间切换后未更新

HTML object "list" is not updating after switching between sites

javascript

html

firebase-realtime-database

onsen-ui