Handlebars / Moustache – Esiste un modo integrato per scorrere le proprietà di un object?

Come dice il titolo della domanda, c’è un modo di eseguire il loop di baffi / manubri attraverso le proprietà di un object ?

Quindi con

var o = { bob : 'For sure', roger: 'Unknown', donkey: 'What an ass' } 

Posso quindi fare qualcosa nel motore di template che sarebbe equivalente a

 for(var prop in o) { // with say, prop a variable in the template and value the property value } 

?

Supporto integrato da Handlebars 1.0rc1

Il supporto per questa funzionalità è stato aggiunto a Handlebars.js, quindi non c’è più bisogno di helper esterni.

Come usarlo

Per gli array:

 {{#each myArray}} Index: {{@index}} Value = {{this}} {{/each}} 

Per oggetti:

 {{#each myObject}} Key: {{@key}} Value = {{this}} {{/each}} 

Si noti che verranno elencate solo le proprietà che superano il test hasOwnProperty .

In realtà è abbastanza facile da implementare come aiuto:

 Handlebars.registerHelper('eachProperty', function(context, options) { var ret = ""; for(var prop in context) { ret = ret + options.fn({property:prop,value:context[prop]}); } return ret; }); 

Quindi utilizzarlo in questo modo:

 {{#eachProperty object}} {{property}}: {{value}}
{{/eachProperty }}

EDIT: Handlebars ora ha un modo integrato per realizzare questo; vedi la risposta selezionata sopra. Quando si lavora con plain Mustache, si applica ancora il testo sottostante.

I baffi possono scorrere su oggetti in un array. Quindi suggerirei di creare un object dati separato formattato in modo che possa funzionare con:

 var o = { bob : 'For sure', roger: 'Unknown', donkey: 'What an ass' }, mustacheFormattedData = { 'people' : [] }; for (var prop in o){ if (o.hasOwnProperty(prop)){ mustacheFormattedData['people'].push({ 'key' : prop, 'value' : o[prop] }); } } 

Ora, il tuo modello di baffi sarebbe qualcosa del tipo:

 {{#people}} {{key}} : {{value}} {{/people}} 

Controlla la sezione “Elenchi non vuoti” qui: https://github.com/janl/mustache.js

Questa è la risposta di @ Ben aggiornata per l’utilizzo con Ember … nota che devi usare Ember.get perché il contesto è passato come una stringa.

 Ember.Handlebars.registerHelper('eachProperty', function(context, options) { var ret = ""; var newContext = Ember.get(this, context); for(var prop in newContext) { if (newContext.hasOwnProperty(prop)) { ret = ret + options.fn({property:prop,value:newContext[prop]}); } } return ret; }); 

Modello:

 {{#eachProperty object}} {{key}}: {{value}}
{{/eachProperty }}

@ La risposta di Amit è buona perché funzionerà sia in Mustache che in Handlebars.

Per quanto riguarda le soluzioni solo per Handlebars, ne ho viste alcune e mi piace l’ each_with_key block each_with_key su https://gist.github.com/1371586 il migliore.

  • Ti permette di scorrere i letterali degli oggetti senza doverli prima ristrutturare, e
  • Ti dà il controllo su ciò che chiami la variabile chiave. Con molte altre soluzioni devi stare attento a usare le chiavi dell’object chiamate 'key' , o 'property' , ecc.

Grazie per la soluzione di Ben, il mio caso d’uso per visualizzare solo particolari campi in ordine

con object

Codice:

  handlebars.registerHelper('eachToDisplayProperty', function(context, toDisplays, options) { var ret = ""; var toDisplayKeyList = toDisplays.split(","); for(var i = 0; i < toDisplayKeyList.length; i++) { toDisplayKey = toDisplayKeyList[i]; if(context[toDisplayKey]) { ret = ret + options.fn({ property : toDisplayKey, value : context[toDisplayKey] }); } } return ret; }); 

Oggetto di origine:

  { locationDesc:"abc", name:"ghi", description:"def", four:"you wont see this"} 

Modello:

 {{#eachToDisplayProperty this "locationDesc,description,name"}} 
{{property}} --- {{value}}
{{/eachToDisplayProperty}}

Produzione:

 locationDesc --- abc description --- def name --- ghi 

Questa è una funzione di supporto per mustacheJS, senza pre-formattazione dei dati e, invece, ottenerla durante il rendering.

 var data = { valueFromMap: function() { return function(text, render) { // "this" will be an object with map key property // text will be color that we have between the mustache-tags // in the template // render is the function that mustache gives us // still need to loop since we have no idea what the key is // but there will only be one for ( var key in this) { if (this.hasOwnProperty(key)) { return render(this[key][text]); } } }; }, list: { blueHorse: { color: 'blue' }, redHorse: { color: 'red' } } }; 

Modello:

 {{#list}} {{#.}}color: {{#valueFromMap}}color{{/valueFromMap}} 
{{/.}} {{/list}}

Uscite:

 color: blue color: red 

(l’ordine potrebbe essere casuale – è una mappa) Questo potrebbe essere utile se si conosce l’elemento della mappa che si desidera. Stai attento ai valori falsi.