Iterate über ein Objekt für Lenker?

Question

Also das ist der allgemeine Kern meiner Daten (kopiert das Aussehen von Chrome Webkit Inspektor).

> Object 
    > Fruit: Array[2] 
    > 0: Object 
     name: "banana" 
     color: "yellow" 
     animalthateats: "monkey" 
     id: 39480 
    > 1: Object 
    length: 2 
    > Vegetables: Array[179] 
    > Dairy: Array[2] 
    > Meat: Array[3] 
    > __proto__: Object 

Und das ist, was ich (im Allgemeinen) zu tun:

<select> 
    <option value="">All Shows (default)</option> 
    <optgroup label="Fruit"> 
    <option value="39480">Banana</option> 
    <option value="43432">Strawberry</option> 
    </optgroup> 
    <optgroup label="Vegetables"> 
    <option value="3432">Broccoli</option> 
    </optgroup> 
</select> 

Ich bin sorta neu in der ganzen Templating Sache, und es scheint, auf jeden Fall nicht einfach zu erreichen ... wenn ich jQuery trotzdem verwenden kann, funktioniert das auch, aber am besten nur mit dieser Einrichtung.

Answer 1

Ihr aktuelles Datenformat präsentiert mit zwei Problemen:

1. Lenker möchte wirklich über Arrays, nicht Objekte zu iterieren.
2. JavaScript-Objekte haben keine zuverlässige Reihenfolge.

Sie werden mehr Glück haben, wenn Sie Ihre Daten neu anordnen können verschachtelt Arrays sein, so etwas wie:

var foods = { /* what you already have */ }; 
var for_hb = [ 
     { name: 'Fruit',  foods: foods.Fruit }, 
     { name: 'Vegetables', foods: foods.Vegetables }, 
     //... 
]; 

Sie können diese einfach wie mit etwas tun:

var for_hb = [ ]; 
for(var k in foods) 
    for_hb.push({name: k, foods: foods[k]}); 
for_hb.sort(function(a, b) { 
    a = a.name.toLowerCase(); 
    b = b.name.toLowerCase(); 
    return a < b ? -1 
     : a > b ? +1 
     :   0; 
}); 

var html = compiled_template({ groups: for_hb }); 

Dann ist Ihre Vorlage einfach:

<select> 
    <option value="">All Shows (default)</option> 
    {{#each group}} 
    <optgroup label="{{name}}"> 
    {{#each foods}} 
     <option value="{{id}}">{{name}}</option> 
    {{/each}} 
    {{/each}} 
</select> 

Sie coul d schreiben Sie einen Helfer, um über ein Objekt zu iterieren, aber Sie müssen die Schlüssel in einem Array immer noch spezifizieren, wenn Sie einer vernünftigen Anzeigereihenfolge sicher sein wollten.

Answer 2

Ich bin eher ein Schnurrbart Mann: - {)

Aber von dem docs hier darüber, wie diese Art der Sache aussieht wird es tun:

<select> 
    <option value="">All Shows (default)</option> 
    <optgroup label="Fruit"> 
    {{#each Fruit}} 
    <option value="{{id}}">{{name}}</option> 
    {{/each}} 
    </optgroup> 
    <!-- repeat for others--> 
</select> 

Answer 3

Verwendung nur "this"

`<script id="some-template" type="text/x-handlebars-template"> 
<option value="none">Selec</option> 
{{#each data}} 
    <optgroup label="{{@key}}"> 
    {{#each this}} 
     <option value="{{id}}">{{name}}</option> 
    {{/each}} 
    </optgroup> 
{{/each}} 
</script>` 

http://jsfiddle.net/rcondori/jfav4o6u/

Answer 4

Soweit Lenker-only-Lösungen, habe ich diese Logik implementiert:

{{#each Listings}} 

<a href="javascript:void(0)" title="" ><img src=" {{DefaultImage}}" alt=" {{Make}} {{Model}}" /> </a> 

Answer 5

Sie können dies über eine benutzerdefinierte tun Komponente siehe Beispiel, dies wird nicht von unserem Standard {{each}} Helper unterstützt (und das ist beabsichtigt).

Beispieldaten:

a = {a:'muhammad', b :'asif', c: 'javed', username: 'maxifjaved'} 

**

Online-Demo für Iterierte werfen ein Objekt

http://emberjs.jsbin.com/yuheke/1/edit?html,js,output

**