Handlebars.js template not rendering on webpages


#1

First of all, sorry I could not find any better topic to list it on. So my problem:
In the exercise of codecademy, the handlebars.js template works, great! But we are here to learn how to use it outside codecademy as well. So now I have put all the webpages (just like in the exercise) on Atom, and tried to log the website. However, the Handlebars.JS templates do not load or show up.

I have googled for multiple hours on this issue, as I have tried it with other exercises for handlebars as well. However, I have not found any solution… Any help is welcome!

So what I did in Atom, I copied all codes and made the same amount of pages, calling them the exact same names and saving them as such. Then I edited the code and used a CDN link to the handlebars library, I tested the link in codecademy and it worked! But when opening with atom, the handlebars template does not show.

As I am considered a new user, I was not allowed to post more than 1 picture… Therefore I have copied/paste the code from ATOM below:

For the first page (index.html) :slight_smile:

Musicon

Musicon

    <nav>
      <ul class='navbar'>
        <li class='current'>
          <a href='index.html'>Home</a>
        </li>
        <li>
          <a href='store.html'>Store</a>
        </li>
        <li>
          <a href='contact.html'>Contact</a>
        </li>
      </ul>
    </nav>

  </section>
</header>

<article id="introduction">
  <section class="container" id='information' >

  </section>
</article>

<footer>
  <p id='footer'>&copy; Musicon</p>
</footer>
<script src="public/main.js"></script>

Now the main.js file :slight_smile:

const context = {
title: ‘Welcome to Musicon’,
body: ‘Musicon is a budding musical storefront with a mission to share the joy of music. These magnificent auditory tools are designed with musical creators, like you, in mind. Hobbyists, beginners, and experts alike can appreciate the resplendent sounds supplied by each and every instrument we carry. Join us in delivering the euphoric vibrations of melodia to the citizens of the world!’,
instruments: [
{
image: ‘’,
name: ‘Electronic Keyboard’,
description: ‘A piano welcomed to the 21th century. Pianists celebrate the compact form factor and the diversity of synthesized rhythms all in one masterful musical machine.’,
price: ‘$1,999.00’,
sale: ‘$1,699.89’
},
{
image: ‘’,
name: ‘Electric Guitar’,
description: 'Join the legends of the '50s and ‘60s when the marriage of guitar and electricity created the most influential instrument of a generation. Note: picks sold separately.’,
price: ‘$599.99’
},
{
image: ‘’,
name: ‘Bass Guitar’,
description: ‘Experience the embodiment of funkadelic frequencies that is the bass guitar. Let the deep low notes of the bass guitar resonate with heartbeats everywhere.’,
price: ‘$624.99’
},
{
image: ‘’,
name: ‘Drum Kit’,
description: ‘Ever thought, “one instrument isn’t enough?” Find an answer in the drum kit. Coordinate a collections of drums and cymbals to dictate the rhythm of musical masterpiece.’,
price: ‘$649.00’,
sale: ‘$349.00’
},
{
image: ‘’,
name: ‘violin’,
description: ‘A versatile that is suited for any and all occasions. Those wearing tuxedos can strum together a classic. Others who prefer overalls can call it a fiddle and play some folk songs.’,
price: ‘$245.00’,
},
]
};

const templateElement = document.getElementById(‘templateHB’);
const templateSource = templateElement.innerHTML;

const template = Handlebars.compile(templateSource);

const compiledHtml = template(context);

document.getElementById(‘information’).innerHTML = compiledHtml;

(I have deleted the images in the context object as I am not allowed to post more than 2 links :confused:)

I hope to hear from you as I really want to solve this problem :slight_smile:


#2

For some reason not all the pasted code is showing… So hereby what is in between the head

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Musicon</title>
<link href='./style.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>
<script id='templateHB' type='text/x-handlebars-template'>
  <h1> {{title}} </h1>
  <p> {{body}} </p>
  <a href='store.html'> Shop Now </a>
</script>

#3

Link to the exercise: https://www.codecademy.com/paths/web-development/tracks/webdev-building-website-templates/modules/templating-with-handlebars/projects/musicon


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.