property - object.keys javascript

¿Iterar sobre un objeto para manillares?

Question

Esta pregunta ya tiene una respuesta aquí:

• Manillares / bigote: ¿hay una forma integrada de recorrer las propiedades de un objeto? 7 respuestas

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>

Soy bastante nuevo en todo lo relacionado con las plantillas, y definitivamente no parece sencillo de lograr ... si puedo usar jQuery de todos modos, eso también funcionará, pero preferiblemente solo con esta configuración.

Answer 1

En cuanto a las soluciones solo para manillares, he implementado esta lógica:

{{#each Listings}} 

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

Answer 2

Puede hacer esto a través de un componente personalizado, por ejemplo, esto no es compatible con nuestro ayudante predeterminado {{each}} (y eso es intencional).

Data de muestra:

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

**

Demo en línea para iterar lanzar un objeto

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

**

Answer 3

Soy más de un hombre de bigote: - {)

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

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

Answer 4

Su formato de datos actual le presenta dos problemas:

1. Los manillares realmente quieren iterar sobre matrices, no objetos.
2. Los objetos de JavaScript no tienen un orden confiable.

Tendrás mejor suerte si puedes reorganizar tus datos para que sean arrays anidados, algo como esto:

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

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

Podría escribir un ayudante para iterar sobre un objeto, pero aún tendría que especificar las claves en una matriz si desea estar seguro de un orden de visualización sensible.

Answer 5

usa solo "esto"

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