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

时间:2015-04-30 07:11:29

标签: javascript handlebars.js

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

尝试1 :传递模板上下文

"产品"模板:

asignee_handle: issue['assignee'] ? issue['assignee']['login'] : nil

" product_buttons"部分:

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

输出:

From partial: {{product.name}}

我们可以看到2个问题:

  • 部分不呈现预期值。我还尝试使用From template: Awesome Steel Shoes <br> [object Object] From partial: {{> product_buttons this}呈现模板以获得完全相同的结果
  • {{> product_buttons product=product}已插入输出

尝试2 :传递哈希变量

&#34;产品&#34;模板:

[object Object]

&#34; product_buttons&#34;部分:

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

这会从编译的部分中引出以下行的错误From partial: {{thename}}

Uncaught TypeError: Cannot read property 'thename' of undefined

附加说明

我使用命令行handlebars实用程序预编译模板。我使用从npm安装的把手3.0.3,但是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 + ""; 的输出是&#34; 3.0.1&#34;奇怪的。我检查了路径和安装,无法解决这个问题

编译命令:

handlebars -v

模板用法示例:

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

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

1 个答案:

答案 0 :(得分:2)

我执行了以下步骤来验证您的示例。首先,我创建了两个模板:

$ 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的内容吗?

顺便说一下:我的车把版本也是3.0.1:

$ handlebars -v
3.0.1

我使用file_name.tmpl.js创建了plnkr