如何使用模板文字和來自 JavaScript 中的對象文字的數據生成 HTML？

Question

正如標題所說，我試圖通過使用對象文字數據動態生成我的 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對象值為空白，則不要在模板文字中創建它。

如果我包含以下幾行，它就可以工作（條件除外）：

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

這是我最近學會使用的東西，所以我不知道如何從我得到的教程中刪除上面的第二個片段。 如果可能的話，我希望它直接獲取這些對象。

還有另一個問題，如果我說，從模板生成的 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>)}`

或者 3000+ 個硬編碼的 HTML 按鈕比從模板生成的 3000+ 個按鈕快