Question

我想创建一个简单的ToDoApplication，但我不确定是否应该使用＆＃34; value＆＃34;或儿童的事件。有什么建议吗？

这是我到目前为止所写的：

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);

并且我不知道如何使用DOM来删除单个任务

Answer 1

值：

value事件用于读取给定数据库路径中内容的静态快照，因为它们在读取事件时存在。它使用初始数据触发一次，每次数据更改时再触发一次。事件回调传递一个快照，其中包含该位置的所有数据，包括子数据。在上面的代码示例中，value返回了应用中的所有博客帖子。每次添加新博客帖子时，回调函数都会返回所有帖子。

儿童已添加：

通常在从数据库中检索项目的列表时使用child_added事件。与返回位置的整个内容的值不同，child_added为每个现有子项触发一次，然后每次将新子项添加到指定路径时再次触发。事件回调传递包含新子数据的快照。出于订购目的，它还传递包含前一个子项的键的第二个参数。

因为两个事件都会完成所需的工作并不重要，通常会在列表上使用child个事件，因为它是一个todo应用程序，我猜你会有一个待办事项列表，那么最好使用child事件来更容易地控制删除和添加孩子。

有关详情，请查看：https://firebase.google.com/docs/database/admin/retrieve-data

firebase toDoApp＆＃34; value＆＃34;或儿童活动？

1 个答案: