it-swarm.com.de

Lenker/Schnurrbart - Gibt es eine integrierte Möglichkeit, die Eigenschaften eines Objekts zu durchlaufen?

Gibt es, wie der Titel der Frage sagt, ein Schnurrbart/eine Lenkstange, um durch object -Eigenschaften zu scrollen?

Also mit 

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

Kann ich dann in der Template Engine tun, die äquivalent wäre

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

?

194
Ben

Eingebaute Unterstützung seit Handlebars 1.0rc1

Unterstützung für diese Funktion wurde zu - Handlebars.js hinzugefügt, sodass keine externen Helfer mehr erforderlich sind.

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 aufgelistet werden, die den Parameter hasOwnProperty bestehen.

401
Jon

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 wie folgt:

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

EDIT: Der Lenker verfügt jetzt über eine integrierte Möglichkeit, dies zu erreichen. Siehe die ausgewählte Antwort oben ..__ Wenn Sie mit normalem Schnurrbart arbeiten, gilt weiterhin das Folgende.

Der Schnurrbart kann Elemente in einem Array durchlaufen. Ich würde also 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]
     });
  }
}

Ihre Mustache-Vorlage würde nun etwa so aussehen:

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

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

27
Amit

Dies ist @ Bens Antwort, die für die Verwendung mit Ember aktualisiert wurde. Beachten Sie, dass Sie Ember.get verwenden müssen, da der Kontext als String übergeben wird. 

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

Vorlage:

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

@ Amits Antwort ist gut, weil sie sowohl für Schnurrbart als auch für Lenker funktioniert.

Was Handlebars-only-Lösungen angeht, habe ich einige gesehen und der each_with_key-Blockhelfer unter https://Gist.github.com/1371586 am besten gefällt.

  • Sie können Objektliterale durchlaufen, ohne sie zuerst neu strukturieren zu müssen 
  • 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 'key' oder 'property' usw. vorsichtig vorgehen.
1
mjumbewu

Vielen Dank für Bens Lösung, mein Anwendungsfall, nur bestimmte Felder in der Reihenfolge 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"}

Vorlage:

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

Ausgabe:

locationDesc --- abc
description --- def
name --- ghi
0
vincentlcy

Dies ist eine Hilfsfunktion für moustacheJS, ohne dass die Daten vorformatiert und stattdessen beim Rendern abgerufen werden.

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

Vorlage:

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

Ausgänge:

color: blue
color: red

(Die Reihenfolge kann zufällig sein - es handelt sich um eine Karte.) Dies kann nützlich sein, wenn Sie das gewünschte Kartenelement kennen. Achten Sie einfach auf falsche Werte.

0
Cuel

Ich habe die alte Version 1.0.beta.6 von Lenkern verwendet. Ich denke, irgendwo zwischen 1.1 und 1.3 wurde diese Funktionalität hinzugefügt. Das Update auf 1.3.0 löste das Problem. Hier ist die Verwendung:

Verwendungszweck:

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