未捕获的类型错误：Handlebars.compile 不是函数答案

【问题标题】：Uncaught TypeError: Handlebars.compile is not a function未捕获的类型错误：Handlebars.compile 不是函数
【发布时间】：2018-05-03 21:32:15
【问题描述】：

这是我的html：

<table id="tableUserPaymentTypeRight">
     <col width="50%"/>
     <col width="25%"/>
     <col width="25%"/>
     <script id="rowUserPaymentTypeRight" type="text/x-handlebars-template">
          {{#each Data}}
              <tr>
                 <td>{{FullName}}</td>
                 <td>
                     {{#if Right_Add}}
                          <input type="checkbox" value="{{UserID}}_0" checked/>
                     {{else}}
                          <input type="checkbox" value="{{UserID}}_0"/>
                 </td>
                 <td>
                      {{#if Right_Confirm}}
                          <input type="checkbox" value="{{UserID}}_1" checked/>
                      {{else}}
                          <input type="checkbox" value="{{UserID}}_1"/>
                 </td>
            </tr>
       {{/each}}
</script>

这是我的 js：

var userPaymentTypeRight = $('#rowUserPaymentTypeRight').html();
var userPaymentTypeRightTpl = Handlebars.compile(userPaymentTypeRight);
var context = data;
var html = userPaymentTypeRightTpl(context);
$('#tableUserPaymentTypeRight').html(html);

这样的数据：

{
{UserID: 26031, FullName: "Aaron Zubler", Right_Add: null, Right_Confirm:null, RowIndex: 1},
{UserID: 26390, FullName: "Achilleas Hoppas", Right_Add: null, Right_Confirm: null, RowIndex: 2},
{UserID: 26168, FullName: "Ai Ke", Right_Add: null, Right_Confirm: null, RowIndex: 3},
{UserID: 26310, FullName: "Alessandra Giordanella", Right_Add: null, Right_Confirm: null, RowIndex: 4}
}

根据 API 似乎是正确的，但我得到了错误：未捕获的 TypeError：Handlebars.compile 不是函数。

【问题讨论】：

Handlebars 定义了吗？ Handlebars.compile 怎么样？我有和你完全相同的代码，但我使用 requirejs 来加载它。也许您正在查看的示例代码也通过诸如 requirejs 之类的模块加载器加载它？我会先自己研究一下包含/加载/脚本包含机制。
我也是用requirejs来加载的，
你的定义是什么样的？这是我的 define(['bootstrap','jquery',"handlebars"], function(bootstrap, $, Handlebars){。firefox/chrome 开发工具 Net 选项卡是否显示 GET车把有用吗？
是的，它定义正确，并且车把的获取请求有效。
我认为您应该发布您在代码中使用的 requirejs 定义。您对 API 本身的使用看起来与我的相同。

标签： handlebars.js

【解决方案1】：

就我而言，发生错误是因为我使用的是 Handlebars 的运行时版本。由于我不打算预编译我的模板（不推荐这样做），我已移至普通版本。

@JL Peyret 提供的答案帮助我找到了真正的问题。

【讨论】：

【解决方案2】：

是什么

console.log(Handlebars.compile)

表演？

在 Firefox Firebug 控制台上完成，我的显示：

function(input, options)

Handlebars 的 console.dir 呢？我的：

console.dir(Handlebars)

输出：

helpers   Object { helperMissing=function(),  blockHelperMissing=function(),  each=function(),  more...}

....

VERSION     "1.3.0"

....

compile  function(input, options)

【讨论】：

未定义。可能在获取handlebars.js 请求时出现问题。
异常：异常（消息，节点）HandlebarsEnvironment：HandlebarsEnvironment（helpers，partials）REVISION_CHANGES：对象SafeString：SafeString（字符串）Utils：对象版本：“2.0.0”VM：对象创建：（） createFrame: (object) default: HandlebarsEnvironment escapeExpression: escapeExpression(string) helpers: Object log: (level, message) logger: Object partials: Object template: (spec)
奇怪的是这个版本没有编译功能。
是的，我的版本是 1.3.0。但即使在handlebarsjs.com 上，他们仍然在谈论编译。我的建议是在您的代码示例中发布 define 的详细信息，而不仅仅是 cmets，还要指定您获得把手的版本/位置。我不太精通javascript，也许更聪明的人可以提供帮助。但是您加载的车把本身似乎有更多问题，而不是您使用它的方式。

【解决方案3】：

您需要改为包含handlebars.amd.js。

如果你有节点，转到临时文件夹类型

npm install --save handlebars

进入\node_modules\handlebars\dist\

将文件handlebars.amd.js 复制到您的项目中。

【讨论】：