Guidon / Moustache - Existe-t-il un moyen intégré de parcourir les propriétés d'un objet?

Question

Comme le dit le titre de la question, existe-t-il une façon de boucler une moustache / un guidon sur les propriétés d'un objet ?

Donc avec

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

Puis-je faire quelque chose dans le moteur de template qui serait équivalent à

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

?

Answer 1

La prise en charge intégrée depuis Guidon 1.0rc1

Le Support pour cette fonctionnalité a été ajoutée à Handlebars.js il n'est donc pas plus avoir besoin de vos aides.

Comment l'utiliser

Pour les tableaux:

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

Pour les objets:

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

Notez que seules les propriétés de passage à l' hasOwnProperty test seront énumérés.

Answer 2

Il est en fait assez facile à mettre en œuvre en tant qu'assistant:

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

Puis en l'utilisant comme ça:

 {{#eachProperty object}}
    {{property}}: {{value}}<br/>
{{/eachProperty }}
 

Answer 3

EDIT: Guidon maintenant a une façon de régler ce problème; voir la réponse sélectionnéeci-dessus. Lorsque vous travaillez avec plaine de la Moustache, le ci-dessous s'applique toujours.

Moustache pouvez effectuer une itération sur les éléments dans un tableau. Donc, je te suggère de créer un objet de données formatées de manière à Moustache peut travailler avec:

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

Maintenant, votre Moustache modèle serait quelque chose comme:

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

Découvrez le "Non-Vide Listes de la section" ici: https://github.com/janl/mustache.js

Answer 4

Ceci est la réponse de @ Ben mise à jour pour une utilisation avec Ember ... Notez que vous devez utiliser Ember.get car le contexte est passé en tant que String.

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

Modèle:

 {{#eachProperty object}}
  {{key}}: {{value}}<br/>
{{/eachProperty }}
 

Answer 5

@Amit la réponse est bonne car elle permet de travailler dans les deux Moustache et le Guidon.

Aussi loin que le Guidon des solutions, j'ai vu un peu et j'aime l' each_with_key bloc d'aide à https://gist.github.com/1371586 le meilleur.

• Il vous permet d'itérer sur les littéraux d'objet sans avoir à restructurer en premier, et
• Il vous donne le contrôle sur ce que vous appelez la variable clé. Avec de nombreuses autres solutions, vous devez être prudent sur l'utilisation de clés de l'objet nommé 'key'ou 'property', etc.