如何使用模板文字生成 HTML，数据来自 JavaScript 中的 object 文字？

Question

正如标题所说，我正在尝试使用 object 文字数据动态生成我的 HTML 按钮，并使用它们来填充模板文字。

一直在尝试但没有成功，找不到关于这个的答案..

请检查以下代码：

const dockButtons = {
    'list': [
        {
            'title': 'Search',
            'icon': '<i class="bi bi-search"></i>',
            'classes': 'dock-btn dock-btn-light',
            'id': 'search-links-app-icon',
            'attributes': 'type="button" accesskey="s"',
            'onclick': '',
            'access': '',
        },
        {
            'title': 'Notes & PDU Assist',
            'icon': '<img class="dock-imgs" src="../assets/links-favicons/assist.svg">',
            'classes': 'collapse dock-btn dock-btn-blue ms-2',
            'id': 'notes-and-pdu-assist-app-icon',
            'attributes': 'type="button"',
            'onclick': 'closeMainCardsList();',
            'access': '',
        },
    ]
};
const dockButtonsTemplate = `<button class="${classes} ${access}" id="${id}" onclick="${onclick}" ${attributes} title="${title}">${icon}</button>`;
const generateDockButtons = dockButtons.list.map(dockButtonsTemplate);
document.getElementById("dock-buttons-data").innerHTML = generateDockButtons.join("")

<div id="dock-buttons-data"></div>

我还希望可以在模板中创建条件，例如，如果 onclick object 值为空，则不要在模板文字中创建它。

如果我包含这些行，它就可以工作（条件除外）：

const dockButtonsTemplate = ({
    title,
    icon,
    classes,
    id,
    attributes,
    onclick,
    access
}) =>

这是我最近学会使用的东西，所以我不知道如何从我获得的教程中删除上面的第二个片段。如果可能的话，我希望它直接获取那些 object。

还有另一个问题，加载速度更快，如果我已经说过，从模板生成 3000 多个按钮或不使用此模板的 3000 多个硬编码 HTML 按钮？

Answer 1

你可以试试这个代码

const btnList = dockButtons .lists;
document.getElementById('dock-buttons-data').innerHTML = `${btnList.map((btn) =>  
   <button class="${btn.classes} ${btn.access}" id="${btn.id}" 
    onclick="${btn.onclick}" ${btn.attributes} 
     title="${btn.title}">${btn.icon}</button>)}`

OR 3000+ 硬编码 HTML 按钮比从模板生成的 3000+ 按钮更快

如何使用模板文字生成 HTML，数据来自 JavaScript 中的 object 文字？

How to generate HTML using template literal with data coming from an object literal in JavaScript?

html

javascript

object-literal

template-literals