Question

我正在使用webflow（前端）和memberstack（后端）构建Web应用程序。

为了创建可供登录用户查看和删除每个便笺的便笺列表，我为每个用户附加了一个JSON对象，该对象内部的一个参数为“便笺”，其中本身是一个包含所有注释及其标题和文本的对象。

我编写了一个代码，该代码遍历每个单独的注释并复制了一个div，并将该单个注释的参数填充到该div中。

我觉得我的JavaScript尚未经过优化，因此必须有更好的方法来从json对象中创建html。

这是我的代码，可在单击按钮时创建新的注释：

document.querySelector('[yke-action="addNote"]').addEventListener("click", metaAddNote);


function metaAddNote()
{
    MemberStack.onReady.then(async
    function (member)
    {
        var metadata = await member.getMetaData()
        // do stuff with members data
        if (!metadata.notes) metadata.notes = [];

        //new note
        var newNote =
        {
            noteTitle: document.querySelector('[yke-input="noteTitle"]').value,
            nodeText: document.querySelector('[yke-input="noteText"]').value
        }

        //add new notes
        metadata.notes.push(newNote)

        //save notes
        member.updateMetaData(metadata)
        console.log(metadata)
        //! myVar = setTimeout(updatePageOnNotesChange, 300)
        //create a new note block
        //loadAllNotes()

        function createNewNoteBlock()
        {
            var itm = document.getElementById("noteexample").lastChild;
            var cln = itm.cloneNode(true);
            cln.querySelector('[yke-data="noteTitle"]').innerHTML = newNote.noteTitle;
            cln.querySelector('[yke-data="noteText"]').innerHTML = newNote.nodeText;
            cln.querySelector('[yke-action="deleteNote"]').addEventListener("click", metaDeleteNote);
            document.getElementById("notelist").appendChild(cln);
        }
        createNewNoteBlock()
    })
}

这是在页面加载时加载所有笔记的功能：

function loadAllNotes()
{
    MemberStack.onReady.then(async
    function (member)
    {
        var metadata = await member.getMetaData()
        // do stuff with members data
        document.querySelector('[yke-data="amountOfNotes"]').innerHTML = metadata.notes.length;

        function aStepFurther()
        {
            if (metadata["level"] === "advanced")
            {
                changeLevelToAdvanced()
            }
            else
            {
                changeLevelToBeginner()
            }
        }

        Object.keys(metadata.notes).forEach(function (key)
        {
            //console.log(key, metadata.notes[key]);
            var itm = document.getElementById("noteexample").lastChild;
            var cln = itm.cloneNode(true);
            cln.querySelector('[yke-data="noteTitle"]').innerHTML = metadata.notes[key].noteTitle;
            cln.querySelector('[yke-data="noteText"]').innerHTML = metadata.notes[key].nodeText;
            cln.querySelector('[yke-action="deleteNote"]').addEventListener("click", metaDeleteNote);
            cln.setAttribute('yke-identifier', key);
            document.getElementById("notelist").appendChild(cln);
        });


    })
}

我还有一个删除功能，可以从列表和元数据变量/对象中删除单个注释。但是现在要更新列表，我使用的是location.reload（），它会完全重新加载所有内容。删除项目后，有没有更好的方法来更新列表？


function metaDeleteNote()
{
    var notenumber = this.parentNode.getAttribute("yke-identifier");

    MemberStack.onReady.then(async
    function (member)
    {
        var metadata = await member.getMetaData()
        // do stuff with members data
        metadata.notes.splice(notenumber, 1)

        console.log(metadata)
        await member.updateMetaData(metadata)
        location.reload();
    })

}

如何使用JSON对象在页面上生成HTML对象

0 个答案: