Handlebars.jsで地図を反復処理する方法はありますか？

Question

のようなHandlebars.jsと配列を反復処理するのは簡単です：

{{#each comments}} 
<div class="comment"> 
    <h2>{{title}}</h2> 
    {{{{url}}} 
</div> 
{{/each}} 

などのアレイ：

{ 
    comments: [ 
    { url: "http://www.yehudakatz.com", title: "Katz Got Your Tongue" }, 
    { url: "http://www.sproutcore.com/block", title: "SproutCore Blog" }, 
    ] 
} 

しかし、私のようなマップを反復処理する方法が見つからない：

を

Handlebars.jsを使用して地図を反復する方法はありますか？それとも私のようなオブジェクトをrestructurateする必要があります。

{ 
    headers: [ 
    { key: "Host", value: "www.example.com" }, 
    { key: "Location", value: "http://www.example.com" }, 
    ] 
} 

Answer 1

であるホープは、これは私の洗練され：

Handlebars.registerHelper('eachInMap', function (map, block) { 
    var out = ''; 
    Object.keys(map).map(function(prop) { 
     out += block.fn({key: prop, value: map[ prop ]}); 
    }); 
    return out; 
}); 

そして、それを使用する：

{{#eachInMap myMap}} 
key:{{key}} value: {{value}} 
{{/eachInMap}} 

Answer 2

あなたがしなければならないすべてはそうのようなヘルパーを登録している：

Handlebars.registerHelper('eachInMap', function (map, block) { 
    Object.keys(myObj).map(function(prop) { 
     return block(myObj[ prop ]); 
    }); 
}); 

テンプレートであなたがそれを呼び出すことができます。

{{#eachInMap mapObject}} 
some HTML and other stuff 
{{/eachInMap}} 

それでおしまい。上記の答えは右のトラックにある、それは任意の使用

Answer 3

で使用するための、より完全な例Map（） - ハンドルバーから取得したサポート関数を使用します。これにより、eachOfMap内のブロック変数が機能します。

function appendContextPath(contextPath, id) { 
     return (contextPath ? contextPath + '.' : '') + id; 
    } 

    function blockParams(params, ids) { 
     params.path = ids; 
     return params; 
    } 

    Handlebars.registerHelper('eachOfMap', function (map, options) { 
     let contextPath; 
     if (options.data && options.ids) { 
     contextPath = appendContextPath(options.data.contextPath, options.ids[0]) + '.'; 
     } 

     let data = Handlebars.createFrame(options.data); 

     var out = ''; 
     for (let [key, item] of map) { 
     data.key = key; 
     if (contextPath) { 
      data.contextPath = contextPath+key; 
     } 
     // out += block.fn({"key": key, "value": item}); 
     out = out + options.fn(item, { 
      data: item, 
      blockParams: blockParams([item, key], [contextPath + key, null]) 
     }); 
     } 
     return out; 
    }) 

使用法：

let dataAsMap = new Map([["keyOne", {name: "bob", age: 99}], ["keyTwo", {name: "alice", age: 99}]]); 

    {{#eachOfMap (dataAsMap)}} 
     <li> 
     {{> "fragments/childTemplate"}} 
     </li> 
    {{/eachInMap}} 

    <span>Hey {{name}}, you're {{age}} years </span> 

Answer 4

これは今でサポートされています。

{{#each headers}} 
    Key: {{@key}}, Value: {{this}} 
{{/each}} 

Answer 5

ハンドルバーで反復ES6 Mapへの道のためにグーグルながらケースで誰かがこの質問に上陸し、ここではヘルパーです：

Handlebars.registerHelper('eachInMap', (map, block) => { 
    let output = ''; 

    for (const [ key, value ] of map) { 
    output += block.fn({ key, value }); 
    } 

    return output; 
}); 

ニコラスC. ZakasによってUnderstanding ECMAScript 6ブックから

const map = new Map([['name', 'Nicholas'], ['age': 25]]); 

ES6 Map初期化サンプル：Map初期化及び反復を実証

 
例、。

 
あなたHandlebars.jsテンプレートで使用して、新しいヘルパー：

{{#eachInMap map}} 
    key: {{ key }}, value: {{ value }} 
{{/eachInMap}} 

は今、あなたはすべてのハンドルバー‌ にネイティブES6 Mapを反復するように設定しています！