Невозможно передать переменные частичным в руле 3

Пытался передать переменную частичной без успеха.

Попробовать 1: передать шаблонный контекст

"продукт":

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

"product_buttons" partial:

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" partial:

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 командной строки. Я использую handlebars 3.0.3, установленный с npm, но вывод 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});

Любая помощь будет принята с благодарностью. Благодаря

Ответы

Ответ 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

Я видел, что вы не установили контекст для своего шаблона продукта. Но я думаю, это просто отсутствует в вашем примере, верно?

Можете ли вы подтвердить (и опубликовать, если отличается) содержимое вашего file_name.tmpl.js?

Btw: Моя версия рулей также 3.0.1:

$ handlebars -v
3.0.1

Я создал plnkr с помощью file_name.tmpl.js.