"값"또는 하위 이벤트가있는 firebase toDoApp?

Question

간단한 ToDoApplication을 만들고 싶지만 "value"또는 하위 이벤트를 사용해야하는지 잘 모르겠습니다. 어떤 제안?

const list1 = document.querySelector('.t__tasks'); 
const input = document.querySelector('.t__text'); 
const addBtn = document.querySelector('.t__submit'); 

const toDoRefObject = firebase.database().ref().child('t'); 

window.addEventListener('DOMContentLoaded', (e) => {  
    toDoRefObject.on('value', data => { 
     data.forEach((data) => { 
      const li = document.createElement('li'); 
      const button = document.createElement('button'); 
      button.classList.add('t__add'); 
      button.textContent = "Delete"; 
      button.type = "button"; 
      li.textContent = data.val(); 
      li.appendChild(button); 
      list1.appendChild(li); 
     })   
    }); 
}); 

const removeTask = (e) => { 
    if(!e.target.matches('.t__add')) return; 
} 

const addTask = () => { 
    const taskText = input.value; 
    list1.innerHTML = ''; 
    toDoRefObject.push(taskText); 
}; 

addBtn.addEventListener('click', addTask); 
list1.addEventListener('click', removeTask); 

내가 단일 작업을

Answer 1

값 제거하기 위해 DOM을 사용하는 방법을 모른다 :

값 이벤트를

이

내가 지금까지 쓴 것입니다 read 이벤트가 발생했을 때와 마찬가지로 주어진 데이터베이스 경로에서 내용의 정적 스냅 샷을 읽는 데 사용됩니다. 초기 데이터로 한번 트리거되고 데이터가 변경 될 때마다 다시 트리거됩니다. 이벤트 콜백에는 하위 데이터를 포함하여 해당 위치의 모든 데이터가 포함 된 스냅 샷이 전달됩니다. 위의 코드 예제에서 value는 앱의 모든 블로그 게시물을 반환했습니다. 새 블로그 게시물이 추가 될 때마다 콜백 함수는 모든 게시물을 반환합니다.

아이 추가 : 데이터베이스에서 항목의 목록를 검색 할 때

child_added 이벤트가 일반적으로 사용된다. 위치의 전체 내용을 반환하는 값과 달리 child_added는 기존의 각 자식에 대해 한 번 트리거되고 새 자식이 지정된 경로에 추가 될 때마다 다시 트리거됩니다. 이벤트 콜백에는 새 하위 데이터가 포함 된 스냅 샷이 전달됩니다. 순서를 지정하기 위해서, 이전의 아이의 키를 포함한 2 번째의 인수가 건네받습니다.

당신은 다음의 아마 더 할 일 항목의 목록이있을 것이다 보통 child 이벤트 목록에서 필요한 일을 할 것입니다 모두 이벤트와 같은 문제가 그렇게 많이하지 사용 않는 다음 그것 todo 응용 프로그램 이후 같아요 child 이벤트를 사용하여 자녀 제거 및 추가를 쉽게 제어 할 수 있습니다.

자세한 내용은 다음을 확인하십시오. https://firebase.google.com/docs/database/admin/retrieve-data