Kann Schnurrbart ein Array der obersten Ebene iterieren?

Lesezeit: 4 Minuten

Mein Objekt sieht so aus:

['foo','bar','baz']

Und ich möchte eine Schnurrbart-Vorlage verwenden, um daraus so etwas zu produzieren:

"<ul><li>foo</li><li>bar</li><li>baz</li></ul>"

Aber wie? Muss ich das wirklich erst in so etwas reinhauen?

{list:['foo','bar','baz']}

Benutzer-Avatar
Dan Jordan

Du kannst es so machen…

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>', ['foo','bar','baz']);

Es funktioniert auch für solche Dinge …

var obj = [{name: 'foo'}, {name: 'bar'}];
var tmp = '<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>';
Mustache.render(tmp, obj);

  • eigentlich kommt die Vorlage zuerst: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);

    – Kai Schnitzer

    4. Mai 2012 um 12:06 Uhr


  • Wie bekomme ich zum Beispiel das 2. Element des Arrays? Ich versuche {{.1}} mit mustache.js zu machen und es funktioniert nicht.

    – duliha

    2. April 2015 um 17:22 Uhr

  • NM, habe es herausgefunden: Du kannst die Punkte einfach ignorieren: also {{1}} oder wenn du eine logische Überprüfung machen willst, dann {{#1}} was auch immer {{/1}}

    – duliha

    2. April 2015 um 17:29 Uhr

  • Sind diese Features irgendwo dokumentiert? Ich sehe nicht {{.}}, {{1}}oder etwas Ähnliches in Schnurrbart (5).

    – Daniel Lubarov

    21. Juli 2015 um 23:42 Uhr


  • Hinweis: Top-Level-Array wird von Hogan nicht unterstützt: github.com/twitter/hogan.js/issues/74. Verwenden Sie die Lösung mit einer Eigenschaft: stackoverflow.com/a/8360440/470117

    – mems

    4. April 2019 um 20:11 Uhr

Benutzer-Avatar
Andy Rumpf

Ich hatte heute Morgen das gleiche Problem und nach ein wenig Experimentieren entdeckte ich, dass Sie das {{.}} verwenden können, um auf das aktuelle Element eines Arrays zu verweisen:

<ul>
  {{#yourList}}
  <li>{{.}}</li>
  {{/yourList}}
</ul>

  • Woher kommt der Name der Variablen #yourList? Können Sie ein Javascript-Beispiel des tatsächlichen Renderings zeigen?

    – iwein

    15. April 2012 um 11:43 Uhr

  • Sie müssen nicht einmal “yourList” verwenden, Sie können einfach “.” auch hier: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);

    – Kai Schnitzer

    5. Mai 2012 um 11:34 Uhr

  • Das JavaScript wäre Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});

    – Dan Jordan

    22. Mai 2012 um 15:54 Uhr


  • Beachten Sie, dass Sie dies nur tun, wenn Sie weniger lesbare Vorlagen wünschen. Die akzeptierte Antwort, wenn auch nicht “erforderlich”, ist eine besser lesbare Lösung.

    – Timoxley

    29. Mai 2012 um 12:01 Uhr

  • Weiß jemand, warum diese Informationen in der Dokumentation fehlen? Schnurrbart.github.io/schnurrbart.5.html

    – Josch

    25. Juni 2014 um 19:01 Uhr

Aufbauend auf der Antwort von @danjordan wird dies tun, was Sie wollen:

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);

Rückkehr:

<ul><li>foo</li><li>bar</li><li>baz</li></ul>

  • Es funktioniert nur für Arrays, nicht für Objekte, unmöglich für {a:'foo',b:'bar',c:'baz'}… Wie mache ich anonyme Referenzen beim Iterieren über Objekte?

    – Peter Krauß

    14. Juni 2018 um 20:08 Uhr

Benutzer-Avatar
Bhupender Keswani

Im Folgenden finden Sie Beispiele zum Rendern eines mehrdimensionalen Arrays in einer Vorlage:

Beispiel 1

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : ['foo', 'bar'], multiple_2 : ['hello', 'world']};
var template="<div>{{test}}</div><ul>{{#multiple}}<li>{{.}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{.}}</li>{{/multiple_2}}</ul>";

var output = Mustache.render(template, view);

console.log(output);

Beispiel 2

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : [{name: 'foo', gender: 'male'}, {name: 'bar', gender: 'female'}], multiple_2 : [{text: 'Hello', append: '**', prepend: '**'}, {text: 'World', append: '**', prepend: '**'}]};
var template="<div>{{test}}</div><ul>{{#multiple}}<li>Hello my name is {{name}}. And I am {{gender}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{prepend}}_{{text}}_{{append}}</li>{{/multiple_2}}</ul>";

var output = Mustache.render(template, view);

console.log(output);

Speichern Sie für den Testlauf die obigen Beispiele in der Datei „test.js“ und führen Sie den folgenden Befehl in der Befehlszeile aus

nodejs test.js

Einfachste Lösung für ein Array namens Strengths:

{
   "ViewModel": 
    {
       "StrengthsItems": 
        {
           "Strengths": ["Dedicated", "Resourceful", "Professional", "Positive"]
        }
    }
}

funktioniert für mich wie ein Zauber ist wie folgt:

{{#ViewModel.StrengthsItems}}
    <p class="p4">{{Strengths}}</p>
{{/ViewModel.StrengthsItems}}

Benutzer-Avatar
Nick Perkins

Ich glaube nicht, dass Schnurrbart das kann! (überraschenderweise) Sie können über eine Liste von Objekten iterieren und dann auf die Attribute jedes Objekts zugreifen, aber Sie können anscheinend nicht über eine einfache Werteliste iterieren!

Sie müssen Ihre Liste also umwandeln in:

[ {"value":"foo"},{"value":"bar"},{"value":"baz"} ] 

und dann wäre Ihre Vorlage:

<ul>
  {{#the_list}}
  <li>{{value}}</li>
  {{/the_list}}
</ul>

Für mich scheint dies ein ernsthaftes Problem mit Moustache zu sein – jedes Vorlagensystem sollte in der Lage sein, eine Liste einfacher Werte zu durchlaufen!

1226790cookie-checkKann Schnurrbart ein Array der obersten Ebene iterieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy