HandlebarsJS - 嵌套#each 不被输出

Question

我正在开发一个输出 table 的应用程序，其中包含数据。我有正确输出的正常数据，但是我有一个返回值 'WWWWW' / 'WLDWD'（字母表示 Win/Draw/Loss）。我在底部上传了一张图片，其中显示了我的 table，包括第一个 #each 循环之外的每个循环，它按预期工作。

我有一个table如下

位置俱乐部打赢抽签输 GF GA GD 积分形式

我有一个 #each 循环并输出这些字段的值，然后我在第一个 #each 中有另一个 #each，我希望它输出 recentForm，这是在我的 index.js（如下所示）。

它returns数据如下[ [ 'W', 'W', 'W', 'W' ], [ 'W', 'W', 'W', 'W' ], [ 'W', 'W', 'W', 'W' ],

我使用下面的代码输出它，如果它在我的另一个输出其他数据的#each 中，它不会运行，但是如果它在另一个#each 之外它工作完美.

{{#each recentForm}} 
   {{this.[0]}} // I have 5 of these (5 is the max that will ever be returned)
{{/each}}

完整代码：

router.get('/table', (req, res, next) => {
  var url = `http://api.football-api.com/2.0/standings/1204${config.auth}`

  axios.get(url).then(response => {
    const posSort = response.data.sort((a, b) => {
      return a.position - b.position;
    });

    var recentForm = posSort.map(pos => pos.recent_form.split(''));
    console.log(recentForm);
    res.render('table', {
      teamStats: posSort,
      recentForm: recentForm
    });

  }).catch(error => {
    console.log(error);
  })

});

<table>
  <tr>
    <th>Position</th>
    <th>Club</th>
    <th>Played</th>
    <th>Won</th>
    <th>Drawn</th>
    <th>Lost</th>
    <th>GF</th>
    <th>GA</th>
    <th>GD</th>
    <th>Points</th>
    <th>Form</th>
  </tr>
    {{#each teamStats}}
      <tr>
        <td>{{position}}</td>
        <td>{{team_name}}</td>
        <td>{{overall_gp}}</td>
        <td>{{overall_w}}</td>
        <td>{{overall_d}}</td>
        <td>{{overall_l}}</td>
        <td>{{overall_gs}}</td>
        <td>{{overall_ga}}</td>
        <td>{{gd}}</td>
        <td>{{points}}</td>
      // Below is the one I want to have working - it doesn't output anything when looping even the code is identical to the code outside this loop.
      {{#each recentForm}}
        <td>{{this.[0]}}</td>
      {{/each}}
      </tr>
    {{/each}}
      // Below works perfectly, loops through and outputs them in a td each
      {{#each recentForm}}
        <td>{{this.[0]}}{{this.[1]}}{{this.[2]}}{{this.[3]}}{{this.[4]}}</td>
      {{/each}}
</table>

Answer 1

修复

此处应使用../ operator and lookup helper的组合。请注意嵌套的辅助语法括号 () 而不是大括号。

{{#each (lookup ../recentForm @index)}}
  {{this}}
{{/each}}

../ 运算符有助于获取正确的 'recentForm' 属性（顶级，'teamStats' 的同级），因为 #each 助手设置了一个新的语境。 lookup 助手获取 'teamStats' 循环的 @index 并在该索引处传递 'recentForm' 的值（即 'teamStats' 循环当前所在的团队） .

旁注，您可能只希望 'form' 列的单个 <td> 与单个 <th> 对齐，下面的代码片段就是这样做的。

Run/see 下面的片段。

// shortened data for brevity
var data = {
  teamStats: [
    {team: 'Man U'},
    {team: 'Arsenal'}
  ],
  recentForm: [
    ['W','W','L','D','W'],
    ['L','L','L','D','W']
  ]
};


//inline template for snippet simplicity
var template = '' +
'<table>' +
'<thead>' +
'<tr>'+
'<th>Team Name</th>' +
'<th>Form</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'{{#each teamStats}}' +
'<tr>' +
'<td>{{team}}</td>' +
// start 'form' cell
'<td>' +
'{{#each (lookup ../recentForm @index)}}' +
'{{this}}' +
'{{/each}}' +
'</td>' +
// end 'form' cell
'</tr>' +
'{{/each}}' +
'</tbody>' +
'</table>';

var output = Handlebars.compile(template)(data);
console.log(output)
// for snippet simplicity
$('body').html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

备选

或者，解析 'recentForm' 值并将它们放在每个 'teamStats' 对象中的属性上可能更简单。那么你的模板就不需要更复杂的 ../ 和 lookup 而只会变成：

<td>{{recentForm}}</td>

// shortened data for brevity
var teamStats = [
    {team: 'Man U'},
    {team: 'Arsenal'}
  ];
var recentForm = [
    ['W','W','L','D','W'],
    ['L','L','L','D','W']
  ];
// loop each team, and add recentForm at index
teamStats.forEach(function(team, index) {
  team.recentForm = recentForm[index].join(',');
});

var data = {
  teamStats: teamStats
};

var template = '' +
'<table>' +
'<thead>' +
'<tr>'+
'<th>Team Name</th>' +
'<th>Form</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'{{#each teamStats}}' +
'<tr>' +
'<td>{{team}}</td>' +
'<td>{{recentForm}}</td>' +
'</tr>' +
'{{/each}}' +
'</tbody>' +
'</table>';

var output = Handlebars.compile(template)(data);
console.log(output)
// for snippet simplicity
$('body').html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

HandlebarsJS - 嵌套#each 不被输出

HandlebarsJS - nested #each not being output

handlebars.js

修复

备选