无法将变量传递给把手 3 中的部分变量

Question

尝试将变量传递给部分但没有成功。

尝试 1：传递模板上下文

"product"模板：

From template: {{product.name}} 
<br>
{{> product_buttons}}

"product_buttons"部分：

From partial: {{product.name}}

输出：

From template: Awesome Steel Shoes
<br>
[object Object]
From partial:

我们可以看到2个问题：

部分未呈现预期值。我还尝试使用 {{> product_buttons this} 和 {{> product_buttons product=product} 渲染模板以获得完全相同的结果
[object Object]在输出中插入

尝试 2：传递哈希变量

"product"模板：

From template: {{product.name}} 
<br>
{{> product_buttons thename=product.name}}

"product_buttons"部分：

From partial: {{thename}}

这会在编译部分的以下行中引发错误 Uncaught TypeError: Cannot read property 'thename' of undefined：

return "From partial: "
+ this.escapeExpression(((helper = (helper = helpers.thename || (depth0 != null ? depth0.thename : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0,{"name":"thename","hash":{},"data":data}) : helper)))
                                                     ^--- Error is from here
+ "";

补充说明

我使用命令行 handlebars 实用程序预编译模板。我使用从 npm 安装的 handlebars 3.0.3，但奇怪的是 handlebars -v 的输出是“3.0.1”。我检查了路径和安装，但也无法修复

编译命令：

handlebars directory/*.handlebars -f file_name.tmpl.js

模板使用示例：

Handlebars.registerPartial('product_buttons', Handlebars.templates.product_buttons);
product = {name: 'test'};
html = Handlebars.templates.product({product: product});

任何帮助将不胜感激。谢谢

Answer 1

我做了以下步骤来验证你的例子。首先我创建了两个模板：

$ cat directory/product.handlebars 
From template: {{product.name}} 
<br>
{{> product_buttons}}

$ cat directory/product_buttons.handlebars
From partial: {{product.name}}

然后我编译了它们

$ handlebars directory/*.handlebars -f file_name.tmpl.js

得到了file_name.tmpl.js:

(function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['product_buttons'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
    var stack1;

  return "From partial: "
    + this.escapeExpression(this.lambda(((stack1 = (depth0 != null ? depth0.product : depth0)) != null ? stack1.name : stack1), depth0));
},"useData":true});
templates['product'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
    var stack1;

  return "From template: "
    + this.escapeExpression(this.lambda(((stack1 = (depth0 != null ? depth0.product : depth0)) != null ? stack1.name : stack1), depth0))
    + " \n<br>\n"
    + ((stack1 = this.invokePartial(partials.product_buttons,depth0,{"name":"product_buttons","data":data,"helpers":helpers,"partials":partials})) != null ? stack1 : "");
},"usePartial":true,"useData":true});
})();

然后我将 file_name.tmpl.js 包含在我的 index.html 中并像这样呈现模板

Handlebars.registerPartial('product_buttons', Handlebars.templates.product_buttons);
var context = {product: {name: 'My product'}};
html = Handlebars.templates.product(context);
console.log(html);

给我这个控制台输出：

From template: My product 
<br>
From partial: My product

我看到您没有为您的产品模板设置上下文。但我猜你的例子中只是缺少了这一点，对吧？

你能否验证一下（如果不同，post）你的 file_name.tmpl.js 的内容？

顺便说一句：我的把手版本也是 3.0.1：

$ handlebars -v
3.0.1

我使用 file_name.tmpl.js 创建了一个 plnkr。

无法将变量传递给把手 3 中的部分变量

Cannot pass variables to a partial in handlebars 3

javascript

handlebars.js