如何使用模板文字与来自JavaScript中的对象文字的数据生成HTML？

发布于 2025-01-30 10:10:28 字数 1777 浏览 3 评论 0原文

正如标题所说，我正在尝试通过使用对象文字数据动态生成我的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多个硬编码的HTML按钮生成的3000多个按钮？

原文

As the title says, I'm trying to dynamically generate my HTML buttons by using object literal data and use those to fill the template literal.

Been trying with no luck and can't find an answer about this..

Please check the code below:

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>

I would also like it to be possible to create a conditional in the template, where if for example onclick object value is blank, don't create it in the template literal.

It's working (except the condition) if I include these lines:

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

This is something I've learned to use recently, and so I can't figure out how to remove the second snippet above from the tutorial I got it from. I'd like it to be directly fetching those objects if possible.

Also another question, which is faster to load, if I have say, 3000+ buttons generated from template OR 3000+ hard coded HTML buttons without using this template?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱桃奶球 2025-02-06 10:10:28

您可以尝试此代码

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多个按钮快

You can try this code

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+ hard coded HTML buttons is faster than 3000+ buttons generated from template

回复收藏 0 原文

~没有更多了~