從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