¿Iterar sobre un objeto para manubrios?

Question

Así que esta es la esencia general de mis datos (copiado el aspecto del inspector de chrome webkit).

> 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 

y esto es lo que quiero hacer (en general):

<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> 

Estoy sorta nuevo a todo el asunto de plantillas, y que sin duda no parece fácil de lograr ... si puedo usar jQuery de todos modos, también funcionará, pero preferiblemente solo con esta configuración.

Answer 1

Su formato de datos actual que presenta con dos problemas:

1. Los manubrios realmente quieren iterar en las matrices, no en los objetos.
2. Los objetos JavaScript no tienen un orden confiable.

Vas a tener mejor suerte si se puede reorganizar los datos a ser matrices anidadas, algo como esto:

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

Usted puede hacer eso con algo tan simple como esto:

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

Entonces su plantilla es simple:

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

Usted coul d escribir un ayudante para iterar sobre un objeto, pero aún tendría que especificar las claves en una matriz si quería estar seguro de un orden de visualización razonable.

Answer 2

soy más hombre del bigote: - {)

Pero a partir de los documentos aquí parece que este tipo de cosas lo hará:

<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

uso justo "este"

`<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

En lo que Manillar-únicas soluciones, he aplicado esta lógica:

{{#each Listings}} 

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

Answer 5

Usted puede hacer esto a través de una costumbre componente ver ejemplo, esto no es compatible con nuestro asistente predeterminado {{each}} (y eso es intencional).

datos de ejemplo:

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

**

línea Demo para iterar lanzar un objeto

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

**