Gibt es eine integrierte Möglichkeit, die Eigenschaften eines Objekts zu durchlaufen?

Gibt es eine Art Schnurrbart/Lenker durchzuschleifen Objekt Eigenschaften?

Also mit

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

Kann ich dann was machen in der Template-Engine das wäre gleichbedeutend

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

?

Eingebaute Unterstützung seit Handlebars 1.0rc1

Unterstützung für diese Funktionalität wurde hinzugefügt zu Handlebars.js, sodass keine externen Helfer mehr benötigt werden.

Wie man es benutzt

Für Arrays:

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

Für Objekte:

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

Beachten Sie, dass nur Eigenschaften, die die übergeben hasOwnProperty Prüfung wird aufgezählt.

Es ist eigentlich ganz einfach als Helfer zu implementieren:

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

Dann verwenden Sie es so:

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

BEARBEITEN: Lenker haben jetzt eine eingebaute Möglichkeit, dies zu erreichen; siehe die ausgewählte Antwort oben. Wenn Sie mit einfachem Schnurrbart arbeiten, gilt das Folgende weiterhin.

Moustache kann Elemente in einem Array durchlaufen. Daher würde ich vorschlagen, ein separates Datenobjekt zu erstellen, das so formatiert ist, dass Moustache damit arbeiten kann:

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

Jetzt würde Ihre Schnurrbart-Vorlage in etwa so aussehen:

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

Schauen Sie sich hier den Abschnitt “Nicht leere Listen” an: https://github.com/janl/mustache.js

Die Antwort von @Amit ist gut, da sie sowohl in Moustache als auch in Handlebars funktioniert.

Was Nur-Lenker-Lösungen angeht, habe ich einige gesehen und die gefallen mir each_with_key Blockhelfer bei https://gist.github.com/1371586 der beste.

• Es ermöglicht Ihnen, über Objektliterale zu iterieren, ohne sie zuerst umstrukturieren zu müssen, und
• Es gibt Ihnen die Kontrolle darüber, was Sie die Schlüsselvariable nennen. Bei vielen anderen Lösungen müssen Sie bei der Verwendung von Objektschlüsseln mit dem Namen vorsichtig sein 'key'oder 'property'etc.

Vielen Dank für Bens Lösung, mein Anwendungsfall, um nur bestimmte Felder der Reihe nach anzuzeigen

mit Objekt

Code:

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

Quellobjekt:

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

Schablone:

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

Ausgabe:

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

Dies ist eine Hilfsfunktion für mustacheJS, ohne die Daten vorzuformatieren und sie stattdessen während des Renderns abzurufen.

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

Schablone:

{{#list}}
    {{#.}}<span>color: {{#valueFromMap}}color{{/valueFromMap}}</span> <br/>{{/.}}
{{/list}}

Ausgänge:

color: blue
color: red

(Die Reihenfolge kann zufällig sein – es ist eine Karte) Dies kann nützlich sein, wenn Sie das gewünschte Kartenelement kennen. Achten Sie nur auf falsche Werte.

Ich habe die alte Version verwendet 1.0.beta.6 des Lenkers, ich denke, irgendwo während 1.1 – 1.3 wurde diese Funktionalität hinzugefügt, also hat die Aktualisierung auf 1.3.0 das Problem gelöst, hier ist die Verwendung:

Verwendungszweck:

{{#each object}}
  Key {{@key}} : Value {{this}}
{{/people}}