Handlebars 将字符串或 Handlebars AST 传递给 Handlebars 编译
Posted
技术标签:
【中文标题】Handlebars 将字符串或 Handlebars AST 传递给 Handlebars 编译【英文标题】：Handlebars Pass a string or Handlebars AST to Handlebars compile 【发布时间】：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。 【参考方案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>
【讨论】：
以上是关于Handlebars 将字符串或 Handlebars AST 传递给 Handlebars 编译的主要内容，如果未能解决你的问题，请参考以下文章
在 Handlebars.js 辅助参数中连接字符串和变量的合理方法？
将 someVar+'a string' 传递给 Handlebars.js 助手？