數組的輸出鍵？

Question

如何輸出以下人名？例如馬丁和塔比塔？

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

這裏的循環：

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

Answer 1

我已經找到了答案是：

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

Answer 2

您可以創建一個塊幫手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爲代碼示例的陣列。