从数组输出键

Output key from array?

本文关键字：输出 数组      更新时间：2023-09-26

如何输出下面的人名?马丁和塔比瑟?

people:
-  martin:
    job: Developer
    skills:
      - python
      - perl
      - pascal
-  tabitha:
    job: Developer
    skills:
      - lisp
      - fortran
      - erlang

这里是循环:

{{#each people}}
    {{ this }}
{{/each}}

我找到了答案:

{{#each people}}
  {{@key}}: {{this}}
{{/each}}

您可以创建一个块助手list来迭代people，并使用当前的index作为私有变量来获取对象中的第一个关键字名称:Object.keys(context[i])[0]。

代码:

var people = [{"martin": {"job": "Developer","skills": ["python","perl","pascal"]}}, {"tabitha": {"job": "Developer","skills": ["lisp","fortran","erlang"]}}];
// Register list helper
Handlebars.registerHelper('list', function (context, options) {
  var out = '<ul>',
      data;
  if (options.data) {
    data = Handlebars.createFrame(options.data);
  }
  for (var i = 0, l = context.length; i < l; i++) {
    if (data) {
      data.index = Object.keys(context[i])[0];
    }
    out += '<li>' + options.fn(context[i], {
      data: data
    }) + '</li>';
  }
  out += '</ul>';
  return out;
});
// The main template
var main = Handlebars.compile($('#main').html());
// Register the list partial that 'main' uses
Handlebars.registerPartial('list', $('#list').html());
// Render the list
$('#output').html(main({
  people: people
}));
<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.5/handlebars.min.js"></script>
<script id="list" type="x-handlebars-template">
  {{#list people}}
    {{@index}}
  {{/list}}
</script>
<script id="main" type="x-handlebars-template">  
  {{> list}}
</script>
<div id="output"></div>

注意:我已经将yaml转换为代码示例中的数组。

相关文章：