Mustache.js: Über Objektschlüssel/Wert-Paare iterieren?

Erstellt am 28. Mai 2015  ·  11Kommentare  ·  Quelle: janl/mustache.js

Ist es möglich, über die Schlüssel/Wert-Paare eines Objekts zu iterieren?

Betrachten Sie dieses Beispiel:

var values = {
  'single': 'Single bed',
  'double': 'Double bed',
  'twin': 'Twin beds'
};

Äquivalenter handlebar.js-Code:

<select name="bed_type">
{{#values}}
  <option value="{{@key}}">{{this}}</option>
{{/values}}
</select>

Ich habe mit mustache.js keinen Weg gefunden, dies zu tun

Danke.

Hilfreichster Kommentar

Führt das Zulassen der Iteration über ein einfaches Objekt wirklich Logik in eine Schnurrbartansicht ein? Mein Argument wäre nein. Ich bin ein Fan des logiklosen Prinzips, aber wir können bereits Arrays iterieren, ich stimme dem OP zu, dass dies unnötig umständlich ist. Betrachten Sie das folgende Beispiel:

Ich möchte, dass meine Daten:

"attr": {
  "class": "foo",
  "href": "/somewhere"
}

Aber es muss sein:

"attr": [
  {
    "key": "class",
    "value": "foo"
  },
  {
    "key": "href",
    "value": "/somewhere"
  }
]

So rendern Sie:

<a{{#attr}} {{ key }}="{{ value }}"{{/attr}}></a>

Alle 11 Kommentare

Hallo @chlab!

Anstatt Ihre Daten direkt an den Renderer zu übergeben, sollten Sie sie in ein view Objekt formatieren. Oder verwenden Sie einen benutzerdefinierten Helfer. Es gibt einige Ideen zu diesen Stackoverflow-Threads:

http://stackoverflow.com/questions/9058774/handlebars-mustache-is-there-a-built-in-way-to-loop-through-the-properties-of
http://stackoverflow.com/questions/9981907/how-to-iterate-over-a-hash-in-mustache-js

Lassen Sie es uns wissen, wenn es immer noch nicht klar ist. Beifall!

Danke @dasilvacontin.
Das scheint ein ziemlich umständlicher Weg zu sein, nicht wahr? Was ist der Grund dafür? Wäre es am Lenker nicht viel einfacher?
Beifall

@chlab Dies ist ein grundlegendes Prinzip von Moustache. Die gesamte Logik sollte in eine Ansicht extrahiert werden, die nicht mit einer Vorlage identisch ist. In diesem Fall erscheint es umständlicher, weil es nur ein bisschen logisch ist, aber das ist ein rutschiger Abhang, den Moustache nicht einmal herunterlassen lässt :)

Meinetwegen. Danke für die Erklärung!

Das ursprünglich angesprochene Grundprinzip macht Moustache zu eigensinnig, ich möchte nicht immer eine separate Umbauphase arrangieren, um Moustache glücklich zu machen...

Führt das Zulassen der Iteration über ein einfaches Objekt wirklich Logik in eine Schnurrbartansicht ein? Mein Argument wäre nein. Ich bin ein Fan des logiklosen Prinzips, aber wir können bereits Arrays iterieren, ich stimme dem OP zu, dass dies unnötig umständlich ist. Betrachten Sie das folgende Beispiel:

Ich möchte, dass meine Daten:

"attr": {
  "class": "foo",
  "href": "/somewhere"
}

Aber es muss sein:

"attr": [
  {
    "key": "class",
    "value": "foo"
  },
  {
    "key": "href",
    "value": "/somewhere"
  }
]

So rendern Sie:

<a{{#attr}} {{ key }}="{{ value }}"{{/attr}}></a>

Hallo Leute,

Wie kann ich eine anonyme Liste iterieren? Ich habe versucht, {{#.}} und {{/.}} zu verwenden, aber das funktioniert nicht.

Danke

So iterieren Sie eine anonyme Liste

let facts = doc.data(); res.render('index', {facts});

<ul> {{#each facts}} <li>Key: {{@key}} Value = {{this}}</li> {{/each}} </ul>

Gibt es etwas in dieser Ausgabe, das offiziell ist?

Wie kann man eine anonyme Liste von Objekten mit Schlüssel-Wert-Paaren wirklich nutzen?

Bitte zeigen Sie ein reales Beispiel mit dem vorgeschlagenen Objekt var values = { 'single': 'Single bed', ...} und der vorgeschlagenen Ausgabe der Frage.

PS: @prashantcs8 ist dein Beispiel echt? funktioniert nicht.

@chlab wir sind im Jahr 2018...

@baseten , über Ihr "Aber es muss" oben , das ist das Problem, ist hässlich , um Datenstrukturkonvertierungen zu erzwingen ...

Es ist keine elegante Lösung, aber ich verwende res.render('index', objs2list(obj)) wo vielleicht eine Schnurrbart-Hilfsmethode existiert, um die Konvertierung durchzuführen.

function objs2list(p) {
  r = [];
  for (var key in p) if (p.hasOwnProperty(key)) {
    r.push({"@key":key,"@val":p[key]});
  }
  return r;
}

existieren?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

zekth picture zekth  ·  18Kommentare

ForbesLindesay picture ForbesLindesay  ·  14Kommentare

amper5and picture amper5and  ·  5Kommentare

connor11528 picture connor11528  ·  3Kommentare

mbrodala picture mbrodala  ·  16Kommentare