2016-11-08 5 views
0

以下にどのように人名を出力できますか?例えばマーティンとタビタ?配列からの出力キー?

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

ここでループです:

{{#each people}} 
    {{ this }} 
{{/each}} 
+0

JSONがこのYAML – panthro

+0

のKevin Kloetをハンドルバーの構文で使用していません。 – panthro

+0

@KevinKloetそれはハンドルバーと関係がありますか? – epascarello

答えて

1

私はなるように答えを見つけた:

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

これは次のようにして画面に表示されます。 '0:[object Object] 1:[object Object]' ... OPで尋ねられた名前ではなく、キーを印刷しています –

0

あなたはpeopleを反復処理すると、現在のindexを使用するようにブロックヘルパーlistを作成することができますオブジェクト内の最初のキーである名前を取得するプライベート変数として: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に変換しました。

関連する問題