1

If there is the HTML template-tag:
https://www.w3schools.com/tags/tag_template.asp

And there is the (ES) template literal:
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 ]

Is it possible to pull the template from html-tag, convert it to template literal and use it?

Kalle H. Väravas
  • 3,579
  • 4
  • 30
  • 47
  • i think it must be eval'd, which is doable if you control the template tag's content. – dandavis Jun 25 '19 at 19:19
  • I think 29182244 is an appropriate duplicate of this, because it's essentially the same problem: turn a regular string into a template string. – Pointy Jun 25 '19 at 19:20
  • @dandavis but why is there even htm template-tag, if we cannot use it this way? It would make only sense that one was created for another.. yet there seems to be no connection.. – Kalle H. Väravas Jun 25 '19 at 19:20
  • @Pointy I fail to see how 29182244 covers the html template-tag. – Kalle H. Väravas Jun 25 '19 at 19:21
  • 3
    @KalleH.Väravas keep in mind that the HTML5 standard and the JavaScript standard are developed and advanced *completely* separately. HTML ` – Pointy Jun 25 '19 at 19:21
  • @KalleH.Väravas and that bug covers the ` – Pointy Jun 25 '19 at 19:21
  • they don't actually address the same concerns. the template tag is a better way of storing arbitrary content than using ` – dandavis Jun 25 '19 at 19:21
  • @Pointy I will keep it in mind, but these two are match made in heaven with 0 resources for them to link together. My hopes are someone will find a neat way or makes it very clear, this is not possible. – Kalle H. Väravas Jun 25 '19 at 19:22
  • @dandavis it's better in some ways, but it's more limiting; I cannot use ` – Pointy Jun 25 '19 at 19:22
  • all you have to do is `eval("\`"+elm.textContent+"\`")` to get the literal out; that's short. – dandavis Jun 25 '19 at 19:23
  • Note that I'm not saying your question is unreasonable. It is, and quite so, but that's just the way things go for now. It would be possible for example for browsers to supply an API on the ` – Pointy Jun 25 '19 at 19:24
  • @Pointy Im honestly surprised, that there is no resource about it or nobody else asking this question. This would remove the need for javascript libs to render html in JS. It would also simplify the PWA movement and all ajax based websites. – Kalle H. Väravas Jun 25 '19 at 19:27
  • This is almost a dupe of https://stackoverflow.com/questions/30003353/can-es6-template-literals-be-substituted-at-runtime-or-reused – gman Jun 25 '19 at 22:31
  • @gman I love how SO used to be about solving answers and having discussion, that would lead to being ref. to github issues and etc. Now its about closing question and trying to prove, that there is no worth in keeping them open. No matter how much effort you put in your questions or searching before, there is **always** somebody who is screaming "dupe dupe" or starting a close poll. Lets face it, SO isn't what it was supposed to be anymore.. – Kalle H. Väravas Jul 03 '19 at 10:51
  • S.O. has always said there is supposed to one answer and that all the others should point to that answer. I don't know where you got the idea that it was supposed to be different. The question is basically asking how to use template strings at runtime. The only diff is the strings are from a template tag. The only reason it's not a 100% dupe is because those templates are a DOM hierarchy so it's possible it iterate over tags but that doesn't appear to matter here. Effectively the answers to the other question answer this question so you win. Why are you complaining that you got an answer? – gman Jul 03 '19 at 11:43
  • @gman I didn't get an answer. I also don't see it being duplicate, as otherwise I wouldn't bother to post it. Most of the "dupe" closure on SO are linked to completely irrelevant questions. Why not just disable making new questions (they are gonna be dupes anyways)? – Kalle H. Väravas Jul 03 '19 at 12:04
  • You did get an answer. You just apparently don't like it. – gman Jul 03 '19 at 12:07

0 Answers0