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

回答1:

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.

回答2:

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>

回答3:

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));
});

回答4:

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.

回答5:

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.

回答6:

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(); });

来源：https://stackoverflow.com/questions/24354102/handlebars-pass-a-string-or-handlebars-ast-to-handlebars-compile

标签

javascript

html

handlebars.js