Esiste un metodo per iterare una mappa con Handlebars.js?

Question

E 'facile per scorrere un array con Handlebars.js come:

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

e una serie come:

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

Ma io non trovare un metodo per scorrere una mappa simile:

{ 
    headers: { 
    "Host": "www.example.com", 
    "Location": "http://www.example.com", 

    ... Much more map items ... 
    } 
} 

Esiste un metodo per iterare una mappa con Handlebars.js? O devo restructurate l'oggetto come:

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

Answer 1

La risposta di cui sopra è la strada giusta, questo è il mio perfezionamento:

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

E per usarlo:

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

Answer 2

tutto quello che dovete fare è registrare un aiuto in questo modo:

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

nel modello si può chiamare che:

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

questo è tutto. Spero che sia di qualche utilità

Answer 3

Un esempio più completo per l'uso con Map() - con funzioni di supporto prese dal manubrio - che consentiranno al blocco vars all'interno di eachOfMap di funzionare.

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

Usage:

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

questo è ora supportato con:

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

Answer 5

Nel caso qualcuno atterrato a questa domanda mentre googling di un modo per iterate ES6 Map nel Manubrio, ecco un aiuto:

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

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

    return output; 
}); 

 
Esempio, dimostrando Map inizializzazione e iterazione:

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

ES6 Map inizializzazione campione da Understanding ECMAScript 6 libro di Nicholas C. Zakas.

 
Usa nuovo aiutante nel modello Handlebars.js:

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

Ora è tutto pronto per iterare nativo ES6 Map nel Manubrio ‌ !