Question

我知道它被多次询问过，我看了答案，不知道我哪里出错了。

我查看了Handlebarsjs上的文档，并按照教程进行操作，两次都得到同样的错误。

<!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>

这是我的Javascript

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

我继续收到以下错误，我不确定为什么

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

Answer 1

在将模板脚本加载到DOM之前，您正在运行Handlebars.compile（）。将test.js移到模板脚本下面，你应该好好去。

Answer 2

将脚本移动到页面底部也对我有用。

<!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>

Answer 3

正如其他人所说，问题是你在将TemplateScript加载到DOM之前运行Handlebars.compile()。

将您的javascript调用放入$(document).ready()，确保首先加载所有html。

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

Answer 4

JavaScript文件中需要进行一些修改。我遇到过同样的问题。在我的代码中，我从Views中调用了“handlebars”（以下解释与视图有关）。

在View的初始化函数（init）中包含以下内容：

theTemplate = Handlebars.compile（theTemplateScript）;

在渲染中写下剩下的代码：

var theTemplate = Handlebars.compile（theTemplateScript）; $（document.body的）.append（theTemplate（海图））;

正确的方法是预编译处理程序，存储在文件中，然后将其分配给theTemplate。

Answer 5

在我的情况下，我得到了相同的错误，但问题是html页面中的模板脚本中的拼写错误。我有'prouct-template'应该是'product-template'：

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

一旦我修正了拼写错误，错误消失了，页面加载好了。

Answer 6

在我的情况下，我试图为更深层次的步骤分配一些值，因此，我遇到了错误。

在我的代码之前

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

问题出在

res.locals。 partials .weather

删除图层 partial 后，我的问题消失了。

，最后的代码是

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

Handlebars将一个字符串或Handlebars AST传递给Handlebars编译

6 个答案: