Firebase TodoList 實作

現在簡單的做一個 todo list 的功能，本機端寫入代辦事項，並記錄到 firebase，再從 firebase 撈取資料回來，渲染到畫面上

HTML 架構

首先先有一個大概的 HTML 架構，會如下:

<input type="text" placeholder="請輸入代辦事項" id="text">
<button id="send">送出</button>
<ul id="list"></ul>

選取 DOM 元素

接著依序選取 DOM 元素，並把 firebase 要存入資料的地方也存下來

// todos 資料
const todos = firebase.database().ref('todos');

// 選取 DOM
const text = document.querySelector('#text');
const send = document.querySelector('#send');
const list = document.querySelector('#list');

按鈕送出事件

接著按鈕綁上事件，送出之後寫入資料到 firebase

// 點選送出之後
send.addEventListener('click', function() {
  // 新增資料到 firebase
   todos.push({
    context: text.value
  });
});

撈取資料渲染到畫面上

上述的步驟都沒問題的話，可以檢查 firebase 是否有正常寫入資料，只要有正確寫入的話
接著只要從 firebase 撈取資料，渲染到畫面上就可以了

// 顯示資料出來
todos.on('value', function(snapshot) {
  // 從 firebase 撈回來的資料
  const data = snapshot.val();
  // 累加字串用
  let str = '';
  // 使用 for in 累加字串
  for(let item in data) {
    // 綁上每筆資料的亂碼，做為每筆資料的 key，刪除可以拿來用
    str += `<li data-key="${item}">${data[item].context}</li>`;
  }
  // 渲染到畫面上
  list.innerHTML = str;
});

刪除功能

接著點選畫面上的那筆資料，會刪除當筆資料

// 監聽整個 ul
list.addEventListener('click', function(e) {
  // 如果 DOM 元素是 li 才執行
  if(e.target.nodeName === 'LI') {
    // 取出那筆 li 資料的 data-key
    const key = e.target.dataset.key;
    // 移除那筆資料
    todos.child(key).remove();
  }
});

渲染畫面時，是採用 .on() 並非 .once() 所以刪除某筆資料時，畫面會及時更新
以上就是 todoList 的實作~

補充:資料反轉

先前有做過渲染畫面了，但如果希望最新一筆的資料在最上面的時候，該如何做？

todos.on('value', function(snapshot) {
  let str = '';
  // 建立空陣列
  let data = [];
  // 快照回來的資料，依序新增到 data 內
  snapshot.forEach(function(item) {
    data.push({
      content: item.val().context,
      key: item.key
    });
  });
  // 陣列反轉
  data.reverse();
  // 開始組字串
  for(let item in data) {
    str += `<li data-key="${data[item].key}">${data[item].content}</li>`;
  }
  // 渲染到畫面上
  list.innerHTML = str;
});