从Handlebars Helper返回对象数组

Question

我正在尝试编写一个帮助程序，该帮助程序将返回可以循环通过的对象数组。 这是我现在所拥有的：

Handlebars.registerHelper('testHelper', () => {
  return [
    { slug: 'Test', title: 'This is it!' },
    { slug: 'Test 2', title: 'This is the second it!' },
  ];
});

像这样使用它：

{{#entries this}}
  <a href="/{{slug}}">{{title}}</a>
{{/entries}}

我正在接收数组中每个对象的[object, Object]而不是单个值。 请帮忙：）

谢谢！

Answer 1

把手中的助手的工作方式有些棘手。 无需将数据从帮助程序传递到主模板主体，而是将模板主体中与该帮助程序相关的部分传递给该帮助程序。

因此，例如，当您执行此操作时：

{{#entries this}}
  <a href="/{{slug}}">{{title}}</a>
{{/entries}}

您向entries助手提供了两件事：1）当前上下文（此）2）一些要应用的模板逻辑

帮手获取这些物品的方法如下：

Handlebars.registerHelper('entries', (data, options) => {
  // data is whatever was provided as a parameter from caller
  // options is an object provided by handlebars that includes a function 'fn'
  //   that we can invoke to apply the template enclosed between 
  //   #entries and /entries from the main template
   :
   :
});

因此，要做您想做的事情：

Handlebars.registerHelper('testHelper', (ignore, opt) => {
  var data = [
    { slug: 'Test', title: 'This is it!' },
    { slug: 'Test 2', title: 'This is the second it!' },
  ];
  var results = '';
  data.forEach( (item) => {
    results += opt.fn(item);
  });
  return results;
});

opt.fn(item)应用模板的这一部分：

<a href="/{{slug}}">{{title}}</a>

想法是创建一个字符串（html的一部分），然后将其返回并放置到主模板所制定的字符串中。

这是显示此工作方式的示例。

 <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> </head> <body> <script id="t" type="text/x-handlebars"> {{#testHelper this}} <a href="/{{slug}}">{{title}}</a> {{/testHelper}} </script> <script> Handlebars.registerHelper('testHelper', (ignore, opt) => { var data = [ { slug: 'Test', title: 'This is it!' }, { slug: 'Test 2', title: 'This is the second it!' }, ]; var results = ''; data.forEach((item) => { results += opt.fn(item); }); return results; }); var t = Handlebars.compile($('#t').html()); $('body').append(t({})); </script> </body> </html>

让我也回应其他人试图告诉您的内容。 尝试在模板中填充数据没有多大意义。 应该将其作为上下文传递给您的模板。 否则，您会将业务逻辑与模板逻辑（视图）混合在一起，这会不必要地使事情复杂化。

您可以在同一代码段中进行以下简单更改，将数据传递到模板中：

 <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> </head> <body> <script id="t" type="text/x-handlebars"> {{#testHelper this}} <a href="/{{slug}}">{{title}}</a> {{/testHelper}} </script> <script> Handlebars.registerHelper('testHelper', (ignore, opt) => { var results = ''; data.forEach((item) => { results += opt.fn(item); }); return results; }); var data = [ { slug: 'Test', title: 'This is it!' }, { slug: 'Test 2', title: 'This is the second it!' }, ]; var t = Handlebars.compile($('#t').html()); $('body').append(t(data)); </script> </body> </html>

这样，您可以在javascript中检索数据，并保留模板的预期用途-编制html。

从Handlebars Helper返回对象数组

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-02-19 13:20:45

从Handlebars Helper返回对象数组

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-02-19 13:20:45

解决方案1
3 已采纳 2017-02-19 13:20:45