Question

如果有HTML模板标签：
https://www.w3schools.com/tags/tag_template.asp

有（ES）模板文字：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <template id="tpl-article">
            <article>
                <h1>${article.title}</h1>
                <p>${article.desc}</p>
            </article>
        </template>

        <main id="content">Load content here..</main>

        <script>

            // These are article contents (JSON):
            const articles = [
                {
                    title: 'Little kittens are the best!',
                    desc: 'Little kittens are the best ones yet. I mean who doesnt love little pussycats really? EVERYBODY loves them!'
                },
                {
                    title: 'What type of cats you like?',
                    desc: 'The soft ones, fluffy ones? Which kitties you like?'
                }
            ];

            // Loop trough the articles:
            articles.forEach(article => {
                // .. match the html template and articles json somehow?
            });
        </script>
    </body>
</html>

^{[View on jsfiddle]}

是否可以从html标签中提取模板，将其转换为模板文字并使用它？

您可以一起使用html template-tag和（ES）模板文字吗？

0 个答案: