CODEWITHSUNDEEP
javascripthtmlhandlebars.js
user3765218
user3765218

Reputation: 191

Handlebars Pass a string or Handlebars AST to Handlebars compile

I know its been asked many times, I have looked at the answers and not sure where I am going wrong.

I have looked at the docs on Handlebarsjs and followed a tutorial and both times I am getting the same error. 

<!DOCTYPE html>
<html>
  <head>
     <script src="handlebars-v1.3.0.js"></script>
     <script src="jquery.min.js"></script>
     <script src="test.js"></script>
  </head>
  <body>
    <script id="header" type="text/x-handlebars-template">
      div {{ headerTitle }} div
      Today is {{weekDay}}
    </script>
  </body>   
</html>

And this is my Javascript

var theData = {headerTitle:"name", weekDay:"monday"}
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(document.body).append(theTemplate(theData));

I keep on getting the following error and i am unsure why 

Uncaught Error: You must pass a string or Handlebars AST to Handlebars.compile. 
You passed undefined

Upvotes: 19

Views: 41456

Answers (7)

Denish
Denish

Reputation: 83

You're using Handlebars.compile() before the template script loads. One simple trick would do the work for you. Use the defer tag in your script so that the entire body loads before the script runs in your <head> tag.

<head>
<script src="" defer> </script>
</head>

Upvotes: 0

sh6210
sh6210

Reputation: 4540

in my case i was trying to assign some value to more deeper steps therefore, i faced the error.

Before my code was

app.use(function (req, res, next) { res.locals.partials.weather = {}; = getWeatherData(); next(); });

and the problem was

res.locals.partials.weather

after removing the layer partial my problem was gone.

and the final code is

app.use(function (req, res, next) { res.locals.weather = getWeatherData(); next(); });

Upvotes: 1

rkkkk
rkkkk

Reputation: 133

A bit of modification is needed in JavaScript file. I had the same issue. In my code, I called "handlebars" from Views (following explanation is with respect to views).

Include following in initialize function(init) of View :

theTemplate = Handlebars.compile(theTemplateScript);

In render write the remaining code :

var theTemplate = Handlebars.compile(theTemplateScript); $(document.body).append(theTemplate(theData));

The correct way is to precompile the Handler, Store in file and then assign it to theTemplate.

Upvotes: 0

Heidi
Heidi

Reputation: 11

As others have said, the problem is that you are running Handlebars.compile() before the TemplateScript is loaded into the DOM.

Putting your javascript calls in $(document).ready() you make sure all the html is loaded first.

var theData = {headerTitle:"name", weekDay:"monday"}

$(document).ready(function(){
  var theData = {headerTitle:"name", weekDay:"monday"}
  var theTemplateScript = $("#header").html();
  var theTemplate = Handlebars.compile(theTemplateScript);
  $(document.body).append(theTemplate(theData));
});

Upvotes: 1

striker77
striker77

Reputation: 552

In my case I got the same error but the issue was a typo in the template script in the html page. I had 'prouct-template' should have been 'product-template':

    <script id="prouct-template" type="text/x-handlebars-template">
    ...
    </script>

Once I fixed the typo the error went away and page loaded ok.

Upvotes: 1

Mark
Mark

Reputation: 81

Moving the scripts to the bottom of the page also worked for me.

<!DOCTYPE html>
 <html>
   <head>

   </head>
     <body>
        <script id="header" type="text/x-handlebars-template">
            div {{ headerTitle }} div
            Today is {{weekDay}}
        </script>

        <script src="handlebars-v1.3.0.js"></script>
        <script src="jquery.min.js"></script>
        <script src="test.js"></script>

   </body>   
 </html>

Upvotes: 8

Rob_vH
Rob_vH

Reputation: 780

You are running Handlebars.compile() before theTemplateScript is loaded into the DOM. Move your test.js down below the template script and you should be good to go.

Upvotes: 26

Related Questions