Question

Handlebars编译版本：4.0.8 Handlebars运行时版本：4.0.8

main.js例子：

var tiles = {
"friends": [
  {
    "id": 0,
    "name": "Lolita Simmons"
  },
  {
    "id": 1,
    "name": "Matthews Hunter"
  },
  {
    "id": 2,
    "name": "Pace Slater"
  }
]};

var template = Handlebars.templates['search-card.tmpl'];
            $("#print-search-card").html(template(tiles));

我遇到了似乎困扰车把的问题：

Uncaught TypeError: template is not a function

我确保我的版本匹配，依赖项已更新，并且我的js文件按照正确的顺序提供。

我已经检查了使用Handlebars.COMPILER_REVISION编译修订版本，并且它们与我的模板的编译值匹配（7）。

我如何预编译（使用NPM Handlebars）：

移至未编译模板文件所在的文件夹（搜索卡）。
在控制台中：＆＃39;把手搜索卡-f search-card.tmpl＆＃39;

Answer 1

使用以下方法预编制把手时

handlebars ${input-file} -f ${output-file}

模板名称取自输入文件。

所以在做的时候：

handlebars search-card -f search-card.tmpl

模板名称为search-card，而不是search-card.tmpl

将您的代码更改为：

var template = Handlebars.templates['search-card']; //Without the extension

试验：

为了证明这一点，我创建了一个名为search-card的模板，其中包含以下内容：

<div class="">{{name}}</div>

然后我编译使用：

handlebars search-card -f foo.tmpl

<强>输出：

    (function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['search-card'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
    var helper;

  return "<div>"
    + container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data}) : helper)))
    + "</div>\n";
},"useData":true});
})();

注意输出的templates['search-card']部分。

如果您的输入文件有扩展名，则模板将具有该扩展名。唯一的例外是.handlebars扩展名将被剥离：

编译器将在Handlebars.templates中插入模板。如果你的输入文件是person.handlebars，编译器会将其插入 Handlebars.templates.person。这个模板可能是一个功能以与本地编译的模板相同的方式直接执行。

搜索-card.hbs

Handlebars.templates['search-card.hbs']

搜索-card.handlebars

Handlebars.templates['search-card']

HandlebarsJS：匹配预编译/运行时版本，仍然是＆＃39; Uncaught TypeError＆＃39;

1 个答案:

试验：