Question

我目前正在使用Firebase开发一个网络应用程序，教师可以在该应用程序中预订学校的房间。这是到目前为止的代码：

app.js：

const roomList = document.querySelector('#room-list');
function renderRoom(doc){
    let li = document.createElement('li');
    let buildingNumber = document.createElement('spam');
    let floorNumber = document.createElement('span');
    let roomNumber = document.createElement('span');
    let block = document.createElement('span');
    let firstName = document.createElement('span');
    let lastName = document.createElement('span');
    li.setAttribute('data-id', doc.id);
    buildingNumber.textContent = 'Room: ' + doc.data().buildingNumber + '-' + doc.data().floorNumber + doc.data().roomNumber;
    block.textContent = 'Block: ' + doc.data().block;
    firstName.textContent = 'First Name: ' + doc.data().firstName;
    lastName.textContent = 'Last Name: ' + doc.data().lastName;
    li.appendChild(buildingNumber);
    li.appendChild(floorNumber);
    li.appendChild(roomNumber);
    li.appendChild(block);
    li.appendChild(firstName);
    li.appendChild(lastName);
    roomList.appendChild(li); 
}
db.collection('rooms').where('buildingNumber', '==' , '5').where('floorNumber' , '==' , '1').onSnapshot(snapshot =>  {
    let changes = snapshot.docChanges();
    changes.forEach(change => {
        if(change.type == 'added'){
            renderRoom(change.doc);
        } else if (change.type == 'removed'){
            let li = roomList.querySelector('[data-id = ' + change.doc.id + ']');
            roomList.removeChild(li);
        }
    })
})

app.html：

<!DOCTYPE html>
<html>
    <head>
    <link rel = "stylesheet" href = "Styles.css">
    </head>
    <body>
        <h1>Select the room:</h1>
        <div class = "content">
        <form id = "add-room-list"></form>
        <ul id = "room-list"></ul>
        </div>
        <!-- The core Firebase JS SDK is always required and must be listed first -->
        <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>

        <!-- TODO: Add SDKs for Firebase products that you want to use
            https://firebase.google.com/docs/web/setup#available-libraries -->

        <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "AIzaSyDNB4Ag8hXa_FDEYdWmQ2H_GMVBpWm1-0k",
            authDomain: "internal-assessment-20dd7.firebaseapp.com",
            databaseURL: "https://internal-assessment-20dd7.firebaseio.com",
            projectId: "internal-assessment-20dd7",
            storageBucket: "internal-assessment-20dd7.appspot.com",
            messagingSenderId: "905998751828",
            appId: "1:905998751828:web:1d88f0d2f655eb6141f5c1"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const db = firebase.firestore();
        </script>
    </form>
    </body>
</html>

当前显示有人进入的房间。我想知道如何在每个房间的左侧添加一个复选框，以便可以单击它，然后单击一个按钮，它将所选房间记录到Firebase中。谢谢。

Answer 1

首先，您需要将复选框中的值放入Javascript变量中，以便可以在Firestore集中使用它们。完成此操作后，将值保存到Firestore中的代码应如下所示：

// Add a new document in the collection
db.collection("<your_collection>").doc("<your_doc>").set({
    field1: value1
    field2: value2
    ...
})
.then(function() {
    console.log("Document successfully written!");
})
.catch(function(error) {
    console.error("Error writing document: ", error);
});

此代码未经测试，没有您的集合和文档名称，但是在初始化与Firestore的连接后，您应该像这样在Javascript中使用它，以便您可以在上面编写代码。只需将HTML数据保存到变量中并更改集合和文档名称，即可使用它。

在本文Adding Data to a Cloud Firestore Database中，您可以找到有关如何将数据从HTML保存到Firestore的完整教程。

让我知道信息是否对您有帮助！

添加复选框，然后单击一个按钮以记录到firebase

1 个答案: