HandlebarsJS-嵌套的#each均未输出

Question

我正在开发一个输出带有数据表的应用程序。我有正常的数据输出正确，但是我有一个返回为'WWWWW'/'WLDWD'的值（字母表示胜利/失败/失败）。我已经在底部上传了一张显示我的表格的图像，其中包括一个在第一个#each循环之外的每个循环，按预期工作。

我有一个如下所示的表

Position Club赢得了丢失的GF GA GD积分表

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

它返回//passport-strats.js var {passport} = require("./path"); //other code module.exports = { passport, someVariableFromCurrentModel }; //In app.js var {passport, someVariableFromCurrentModel} = require("./passport-strats"); 之后的数据

我使用下面的代码来输出它，如果它在我的#each里面，它输出其他数据，则它无法运行，但是，如果它在另一个#each之外，则它可以正常工作。

[ [ 'W', 'W', 'W', 'W' ],
  [ 'W', 'W', 'W', 'W' ],
  [ 'W', 'W', 'W', 'W' ],

完整代码：

{{#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);
  })

});

Answer 1

修复

此处应使用../ operator和lookup helper的组合。请注意，嵌套的帮助程序语法用括号()代替，而不用花括号。

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

由于../助手设置了新的上下文，因此#each运算符可帮助获取正确的'recentForm'属性（顶级，'teamStats'的同级）。 lookup助手使用“ teamStats”循环的@index，并在该索引处传递“ recentForm”的值（即，“ teamStats”循环当前所在的团队）。

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

运行/查看下面的代码段。

// 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>