Fatal编程技术网
  • javascript/
  • Javascript “HTML对象”；列表“；在站点之间切换后未更新

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

javascript html

Javascript “HTML对象”；列表“；在站点之间切换后未更新,javascript,html,firebase-realtime-database,onsen-ui,Javascript,Html,Firebase Realtime Database,Onsen Ui,我想要实现什么： <!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>

我想要实现什么：

<!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>
  • 我正在用HTML和Javascript创建简单的Firebase项目 应用程序的目的是创建跨应用程序共享的数据列表 具有特定“族”的用户
问题出在哪里：

<!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>
  • 当我登录并且我的应用程序进入“main.html”网站时，一切都会发生 加载良好，我可以看到从firebase下载的实际项目 转换为ID为“list”的HTML对象。然后，当我单击“注销”按钮时- 同样，一切都很好
  • 当我重新登录时（在第一次使用按钮注销后），问题就会出现。我被调到现场 “main.html”，但列表没有更新…我可以在控制台中看到 我成功地从Firebase下载了数据。唯一的问题是 该HTML没有更新
如果你能给我指一个我能找到答案或指出问题的地方，我将非常感激！ 已尝试在internet上搜索“HTML列表未更新”和类似搜索，但找不到任何内容

我还尝试在第25行将“let”切换为“var”。没有注意到任何差异

“main.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>

“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>


//您的web应用程序的Firebase配置
var firebaseConfig={
//我的FIREBASE配置数据
};
//其他Var。
var currentPage=“register.html”；
让我的听众；
var电子邮件、家庭、密码；
//初始化Firebase
firebase.initializeApp（firebaseConfig）；
var auth=firebase.auth（）；
var db=firebase.database（）；
函数登录（）{
firebase.auth（）{
//用户登录
goToPage（'main.html'）；
firebase.database（）.ref（'/users/'+auth.currentUser.uid）。一次（'value'）。然后（函数（快照）{
family=snapshot.val（）.family；
addDataListener（）；
});
}).catch（函数（错误）{
//在这里处理错误。
var errorCode=error.code；
控制台日志（错误代码）；
如果（错误代码）{
ons.notification.alert（'Error！'）；
}
});
}
函数注销（）{
goToPage（'login.html'）；
firebase.auth（）.signOut（）.then（函数（）{
log（“我刚刚注销”）；
}，函数（错误）{
log（“某些错误：”，错误）；
});    
}
函数addDataListener（）{
log（“侦听器已设置！”）；
myListener=firebase.database（）.ref（'families/'+family）.on（'value'，函数（快照）{
如果（currentPage！=“main.html”）返回；
console.log（snapshot.val（））；
var list=document.getElementById（'list'）；
//空列表
而（list.hasChildNodes（））{
list.removeChild（list.firstChild）；
}
//读取firebase中的所有项目并将其添加到列表中
Object.keys（snapshot.val（））.forEach（函数（k）{
console.log（k+'-'+snapshot.val（）[k]）；
var onsItem=document.createElement（'ons-list-item'）；
onsItem.innerHTML=snapshot.val（）[k]；
onItem.setAttribute（'id'，k）；
列表。追加子项（OnItem）；
});
});
}
函数goToPage（新页）{
currentPage=newPage；
var myNavigator=document.getElementById（'myNavigator'）；
myNavigator.pushPage（newPage）；
}
登录页面
电邮：
密码：
登录

主页
注销
我稍微玩了一下代码，做了两个小改动

问题是
addDataListener（）
没有在
myNavigator.pushPage之后运行

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

现在好像有用了


goToPage（'main.html'）
.然后（=>{
firebase.database（）.ref（'/users/'+auth.currentUser.uid）。一次（'value'）。然后（函数（快照）{
family=snapshot.val（）.family；
addDataListener（）；
});
})



函数goToPage（新页）{
currentPage=newPage；
var myNavigator=document.getElementById（'myNavigator'）；
返回myNavigator.replacePage（newPage）；
}




var currentPage=“register.html”；
让我的听众；
var电子邮件、家庭、密码；
常量mockFirebase={
初始化EAPP:（）=>{}，
auth（）{
返回{
当前用户：{
uid:1
},
使用EmailAndPassword进行登录：（）=>Promise.resolve（{}），
注销：（）=>Promise.resolve（）
}
},
数据库（）{
返回{
参考（路径）{
let值={
家庭：“一”
}
if（路径包括（“族”））{
值=['1'，'2'，'3']
}
返回{
o