HTML对象“列表”在站点之间切换后未更新

问题描述 投票：1回答：1

我想达到什么目的：

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

问题出在哪里：

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

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

我也尝试过在第25行将“ let”切换为“ var”。没有发现任何差异。

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

App 1Console 1

“ main.html”和SECOND登录后的控制台（如您在控制台中所见，已从Firebase成功下载数据-但未更新HTML）：

App 2Console 2

最小可复制代码：

<!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>
javascript html firebase-realtime-database onsen-ui
1个回答
2
投票

我玩了一点代码，做了2个小改动。

addDataListener()之后没有运行myNavigator.pushPage

另外myNavigator.replacePage从字面上将页面/节添加到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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.