2013-06-24 6 views
10

Ich bin neu in Schnurrbart, tragen Sie bitte mit mir :)Iterierte durch JSON-Array mit Schnurrbart

Ich habe ein Array in meinem JSON

"prop":{"brands":["nike","adidas","puma"]} 

wenn ich die Vorlage wie diese

haben
{{#prop}} 
<b>{{brands}}</b> 
{{prop}} 

und ich möchte so etwas bekommen:

<b>nike</b> 
<b>adidas</b> 
<b>puma</b> 

Ich verstehe, dass die Elemente im Array nicht Hash-Schlüssel-Wert-Paare sind, aber ich frage mich, ob es sowieso im Schnurrbart ist, dass ich durch die Elemente iterieren kann.

Danke!

Antwort

1

Schnurrbart ist logiklos, also ist es unmöglich, eine eigene Iteration/Schleife zu schreiben. Es ist jedoch einfach, JSON zu konvertieren. Zum Beispiel:

var json = '{"prop":{"brands":["nike","adidas","puma"]}}'; 
var obj = JSON.parse(json); 
var data = {brands: obj.prop['brands'].map(function(x){ return {name: x}; })}; 

Gibt Ihnen eine data Variable, die mit der Vorlage arbeiten:

{{#brands}} 
    <b>{{name}}</b> 
{{/brands}} 
+0

Danke, das JSON vor der Hand zu analysieren scheint die beste Lösung zu sein. – Liang

29

Hier ist eine Arbeits Geige: http://jsfiddle.net/Qa4UX/

Grundsätzlich müssen Sie über die Marken Array iterieren . Da Ihr Array ist roh und keine Objekte in dir wie so jede Zeichenfolge zu verweisen haben:

{{#props}} 
    <ul> 
    {{#brands}} 
    <li> 
    {{#.}} 
     <b>{{.}}</b> 
    {{/.}} 
    </li> 
    {{/brands}} 
    </ul> 
{{/props}} 

Sie können auch viele weitere Beispiele hier finden: https://github.com/janl/mustache.js#mustachejs---logic-less-mustache-templates-with-javascript

+0

danke für die Antwort Paul, ich sehe Ihren Standpunkt und denke, es wäre eine Lösung, aber ich kann nicht scheinen, die Geige Beispiel zu HTML-Ergebnis zu erzeugen, wenn ich "run", aber eine sehr schöne Lösung, danke! – Liang

+0

Hallo. Nur aus Neugier: Siehst du nicht die Liste im HTML-Frame in jfiddle? – peshkira

+1

Nein,

ist alles, was ich sehe, und der "Run" -Link tut nichts dazu ... – Liang

14

Dies funktioniert

{{#json.props.brands}} 
<h1>{{.}}</h1> 
{{/json.props.brands}} 

{{.}} Wenn Sie ein Array von Strings durchlaufen, a. kann verwendet werden, um auf den aktuellen Eintrag in der Liste zu verweisen.