可使用 once()
方法將資料顯示一次在網頁上,首先先寫入一筆資料到 Firebase,
在 firebase 中在 folder 路徑中寫入一筆字串資料 this is a data
。
const database = firebase.database();
database.ref('folder').set('this is a data')
firebase
在 template 上寫一個 h1 標籤,等等要用這個標籤來顯示 Firebase 的資料。
index.html
<h1 id="title">This is title</h1>
可想而知目前畫面上出現的文字是 h1 的靜態文字,如果想要將資料庫的文字呈現在網頁上,可按照下列步驟:
上方可以看到這次資料的路徑是 folder
,所以先取得資料路徑:
const database = firebase.database();
// 綁定網頁元素
let title = document.querySelector("#title");
// 指定到資料路徑
const folder = database.ref("folder");
//讀取一次資料內容
folder.once("value", function (snapshot) {
console.log(snapshot.val());
});
此時再打開 Chrome 的開發人員工具的 console,會看到取到原本在資料庫的字串。
dev tool > console
已經取得資料的值,再把其值賦予給變數,讓資料渲染在網頁上。
const database = firebase.database();
// 綁定網頁元素
let title = document.querySelector("#title");
// 指定到資料路徑
const folder = database.ref("folder");
//讀取一次資料內容
folder.once("value", function (snapshot) {
// 把資料賦值到變數
title.textContent = snapshot.val();
});
使用 once 的方法,第一個參數是要取得的 value,要用字串,第二個是接 callback function,參數可自定義名稱,這邊使用 snapshot(快照),在使用其參數的 val()
取得資料內容,網頁重新整理後,畫面也會變成跟資料庫一樣的字串了!
前面是讀取一次性資料,如果資料有更新則需要重新整理網頁,Firebase 才會同步更新,而使用 on()
可以透過更新 Firebase 資料內容,立即渲染在網頁上,其語法只要將 once
改為 on
即可。
const database = firebase.database();
// 綁定網頁元素
let title = document.querySelector("#title");
// 指定到資料路徑
const folder = database.ref("folder");
//讀取一次資料內容
folder.on("value", function (snapshot) {
// 把資料賦值到變數
title.textContent = snapshot.val();
});