Handlebars 将字符串或 Handlebars AST 传递给 Handlebars 编译答案

【问题标题】：Handlebars Pass a string or Handlebars AST to Handlebars compileHandlebars 将字符串或 Handlebars AST 传递给 Handlebars 编译
【发布时间】：2014-08-12 19:05:28
【问题描述】：

我知道它被问了很多次，我查看了答案，但不确定我哪里出错了。

我查看了 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

【问题讨论】：

为我工作，jsbin.com/jokulo/1。

标签： javascript html handlebars.js

【解决方案1】：

在将模板脚本加载到 DOM 之前，您正在运行 Handlebars.compile()。将您的 test.js 移到模板脚本下方，您应该可以开始了。

【讨论】：

这也解决了我的问题。

【解决方案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>

【讨论】：

【解决方案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));
});

【讨论】：

【解决方案4】：

在我的情况下，我遇到了同样的错误，但问题是 html 页面中的模板脚本中的错字。我的“产品模板”应该是“产品模板”：

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

一旦我修正了错字，错误就消失了，页面加载正常。

【讨论】：

【解决方案5】：

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

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

theTemplate = Handlebars.compile(theTemplateScript);

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

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

正确的做法是预编译Handler，存储在文件中，然后赋值给theTemplate。

【讨论】：

【解决方案6】：

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

在我的代码之前

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

问题是

res.locals.partials.weather

移除层后部分我的问题消失了。

最后的代码是

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

【讨论】：

【解决方案7】：

您在模板脚本加载之前使用Handlebars.compile()。一个简单的技巧将为您完成工作。在您的脚本中使用defer 标记，以便在脚本在您的<head> 标记中运行之前加载整个正文。

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

【讨论】：