Итерации над объектом для ручек?

Итак, это общий смысл моих данных (скопировал внешний вид от инспектора хромированного веб-кита).

> 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

И это то, что я хочу сделать (в общем):

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

Я новичок во всем шаблоне, и это определенно кажется непростым для выполнения... если я могу использовать jQuery, в любом случае это тоже сработает, но желательно просто с этой настройкой.

Ответы

Ответ 1

В вашем текущем формате данных представлены две проблемы:

Handlebars действительно хочет перебирать массивы, а не объекты.
Объекты JavaScript не имеют надежного порядка.

Вам повезет, если вы можете изменить свои данные на вложенные массивы, например:

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

Вы можете сделать это с помощью чего-то простого:

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

Затем ваш шаблон прост:

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

Вы можете написать помощника для итерации по объекту, но вам все равно придется указывать ключи в массиве, если вы хотите быть уверенным в разумном порядке отображения.

Ответ 2

используйте только "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/

Ответ 3

Это можно сделать с помощью пользовательского компонента, см. пример, это не поддерживается нашим помощником по умолчанию {{each}} (и это намеренно).

Примеры данных

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

Онлайн-демонстрация для итерации бросить объект

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

Ответ 4

Я больше человек Усы: - {)

Но из документов, представленных здесь, похоже, что это будет делать это:

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

Ответ 5

Что касается решений Handlebars, я реализовал эту логику:

{{#each Listings}} 

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