试图将变量传递给部分但没有成功。
尝试 1:传递模板上下文
“产品”模板:
From template: {{product.name}}
<br>
{{> product_buttons}}
“product_buttons”部分:
From partial: {{product.name}}
输出:
From template: Awesome Steel Shoes
<br>
[object Object]
From partial:
我们可以看到两个问题:
- 部分未呈现预期值。我还尝试使用
{{> product_buttons this}
和{{> product_buttons product=product}
渲染模板以获得完全相同的结果 [object Object]
在输出中插入
尝试 2:传递哈希变量
“产品”模板:
From template: {{product.name}}
<br>
{{> product_buttons thename=product.name}}
“product_buttons”部分:
From partial: {{thename}}
这会引发错误 Uncaught TypeError: Cannot read property 'thename' of undefined
at the following line from the compiled partial:
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});
任何帮助将不胜感激。谢谢
最佳答案
我执行了以下步骤来验证您的示例。首先我创建了两个模板:
$ 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
我看到您没有为您的产品模板设置上下文。但我想您的示例中只是缺少了这一点,对吗?
您能否验证(如果不同则发布)file_name.tmpl.js
的内容?
顺便说一句:我的 handlebars 版本也是 3.0.1:
$ handlebars -v
3.0.1
我创建了一个 plnkr使用 file_name.tmpl.js
。
关于javascript - 无法将变量传递给 Handlebars 3 中的部分变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29961256/