CODEWITHSUNDEEP
javascripthtmlhandlebars.js
Luis Alejandro López de Anda
Luis Alejandro López de Anda

Reputation: 169

How can I create a Handlebars template in VSCode

I am not being able to display an HTML template using handlebars in VSCode. I made my template in an HTML file with the script tag in it, which contains a type attribute called "text/x-handlebars-template". One thing to notice is that the script tag changed its color at the end of the code, as soon as I write the type attribute in script. Look at the gray color of this symbol '<' at the end of the script. Any advice to make this template run would be very helpful.

Here is the image:

enter image description here

Here is my HTML code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>handlebars</title>
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
</head>
<body>

    <div class="container">
        Hello!
    </div>

    <script id="template" type="text/x-handlebars-template">
        <h1>{{title}}</h1>
        <ol>
            {{#each list}}
                <li>{{this.name}}</li>
            {{/each}}
        </ol>
        <p>{{footer}}</p>


        <button onclick="fill_template()">fill template</button>       
    </script>
 
 
    <script src="js/main.js"></script>
</body>
</html>

And this is my 'main.js' file:


function fill_template() {
    let data = {
        title: "Why Handlebars are so cool!",
        list: [
            {name: "You can generate stuff"},
            {name: "It works on both ends"},
            {name: "It weighs like 24 kb"},
            {name: "haha templates go brrrrrr <b> bold </b>"}
        ],
        footer: "This is a footer"
    };
    let template = Handlebars.compile(document.querySelector("#template").innerHTML);
    let filled = template(data);
    document.querySelector("#output").innerHTML = filled;

}

Upvotes: 0

Views: 271

Answers (1)

Luis Alejandro L&#243;pez de Anda
Luis Alejandro L&#243;pez de Anda

Reputation: 169

I think it was my mistake since I had left the button tag inside the script tag. That was the reason why It was not working. Also I added the output div, that lets the data to be rendered. The color of the style tag at the end is not causing any issue. So the problem is solved! Thanks again!

Upvotes: 0

Related Questions