Can't get handlebars.js to work

Esthetech commented 8 years ago

Would love some help here..

I removed Jade and installed handlebars.js with: $ npm i handlebars -S

Renamed the extentions to index.hbs.

And for a little test I put in the code below: But nothing gets compiled.

  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <title></title>

  </head>
  <body>

    <div id="placeholder">This will get replaced by handlebars.js</div>

    <script id="myTemplate" type="text/x-handlebars-template">
      {{#names}}
          <li>{{name}}</li>
      {{/names}}
    </script>

    <script type="text/javascript">
      $("document").ready(function(){
        var source = document.getElementById("myTemplate").innerHTML;
        var template = Handlebars.compile(source);
        var data = {
            names: [
            { "name": "foo" },
            { "name": "bar" },
            { "name": "baz" }
            ]
        };
        document.getElementById("placeholder").innerHTML = template(data);

        console.log(template);

      });
    </script>

  </body>

package.json file:

{
  "name": "portfolio",
  "description": "portfolio Marc Haan",
  "dependencies": {
    "coffee-script": "1.x",
    "css-pipeline": "0.3.x",
    "handlebars": "^4.0.5",
    "js-pipeline": "0.2.x",
    "marked": "0.3.x",
    "node-sass": "^3.7.0"
  }
}

When I add in the handlebars.js through a cdn it removes the text 'This will get replaced by handlebars.js'. But does also not compile it correctly and is outputs this in the console:

ret(context, execOptions) {
  if (!compiled) {
    compiled = compileInput();
  }
  return compiled.call(this, context, execOptions);
}

What am I doing wrong?

And as side question. Is it oke to ask this questions onder the issues section of projects or is there a other place for asking help with this kind of questions? Still a bit new to github and coding in general :)

jescalan commented 8 years ago

Hey there @Hoenoe! A better place to ask questions might be our gitter chatroom, this is more a place for things that might be an error with roots.

In this case, your issue is entirely outside the scope of roots. Roots' use of handlebars is to compile templates into static html files, which is is doing exactly as intended. You are trying to use handlebars through javascript on the client side, so you should not be using handlebars through roots, as the two might conflict, and this is probably the source of your issue.

Try changing the file extension to .html and running it that way.

Esthetech commented 8 years ago

Hey @jescalan, Thank you for your help! This clarified things and changing the extension to .html did the trick.

jescalan commented 8 years ago

Great! If you want to precompile the templates, you could always try the client-templates extension as well

jescalan / roots

Can't get handlebars.js to work #718