web-dev-qa-db-fra.com

Itérer sur un objet pour le guidon?

Voici donc l’essentiel de mes données (copie de l’inspecteur 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

Et voici ce que je veux faire (en général):

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

Je suis un peu nouveau dans le domaine des modèles, et cela ne semble absolument pas simple à accomplir ... si je peux utiliser jQuery de toute façon, cela fonctionnera aussi, mais de préférence avec cette configuration.

javascriptjquerytemplateshandlebars.jsmustache
27
Rey

Votre format de données actuel vous pose deux problèmes:

  1. Les guidons veulent vraiment parcourir les tableaux, pas les objets.
  2. Les objets JavaScript n'ont pas d'ordre fiable.

Vous aurez plus de chance si vous pouvez réorganiser vos données pour qu'elles soient des tableaux imbriqués, quelque chose comme ceci:

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

Vous pouvez le faire avec quelque chose de simple comme ceci:

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

Ensuite, votre modèle est simple:

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

Vous pouvez écrire un assistant pour parcourir un objet, mais vous devez toujours spécifier les clés dans un tableau si vous voulez être sûr d'un ordre d'affichage raisonnable.

10
mu is too short

utilisez juste "ceci"

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

10
ron

Vous pouvez le faire via un composant personnalisé, voir exemple, ceci n’est pas supporté par notre assistant {{each}} par défaut (et c’est intentionnel).

Exemple de données:

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

**

Démo en ligne pour itérer lancer un objet

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

**

1
Muhammad Asif Javed

Je suis plus un homme moustache: - {)

Mais d'après les documents ici, il semble que ce genre de chose réussira:

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

En ce qui concerne les solutions réservées au guidon, j'ai implémenté cette logique:

{{#each Listings}} 

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