Как перебирать массив объектов в Handlebars?

Это может показаться глупым вопросом, но я не могу найти ответ нигде.

Я поражаю этот веб-Api, который возвращает массив объектов в формате JSON:

Документы Handlebars демонстрируют следующий пример:

<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

в контексте:

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

В моем случае у меня нет имени для массива, это просто корневой объект ответа. Я пробовал использовать {{#each}} без везения.

Первый раз с использованием Handlebars... что мне не хватает?

UPDATE

Вот упрощенная скрипка, чтобы показать, что я спрашиваю: http://jsfiddle.net/KPCh4/2/

Требуется ли для дескрипторов контекстная переменная быть объектом, а не массивом?

Ответ 1

Вы можете передать this в каждый блок. См. Здесь: http://jsfiddle.net/yR7TZ/1/

{{#each this}}
    <div class="row"></div>
{{/each}}

Ответ 2

Я имел в виду в вызове template()..

Вам просто нужно передать результаты как объект. Поэтому вместо вызова

var html = template(data);

делать

var html = template({apidata: data});

и используйте {{#each apidata}} в вашем шаблоне кода

демо на http://jsfiddle.net/KPCh4/4/
(удалил оставшийся код if, который разбился)

Ответ 3

Эта скрипта имеет как each, так и прямой json. http://jsfiddle.net/streethawk707/a9ssja22/.

Ниже приведены два способа итерации по массиву. Один из них связан с прямым передачей json, а другой - с именем json-массива при передаче владельцу содержимого.

Eg1: приведенный ниже пример непосредственно вызывает json-ключ (данные) внутри переменной small_data.

В html используйте приведенный ниже код:

<div id="small-content-placeholder"></div>

Ниже можно поместить в заголовок или тело html:

<script id="small-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#data}}
                <tr>
                    <td>{{username}}
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/data}}
        </tbody>
    </table>
</script>

Ниже представлен готовый документ:

var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

Ниже приведен json:

var small_data = {
            data: [
                {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" }
            ]
        };

Наконец, присоедините json к держателю содержимого:

$("#small-content-placeholder").html(small_template(small_data));

Eg2: Итерация с использованием каждого.

Рассмотрим ниже json.

var big_data = [
            {
                name: "users1",
                details: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                    {username: "allison1", firstName: "Allison", lastName: "House", email: "[email protected]" },
                    {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
                  ]
            },
            {
                name: "users2",
                details: [
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                    {username: "allison2", firstName: "Allison", lastName: "House", email: "[email protected]" },
                    {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
                  ]
            }
      ];

При передаче json в держатель содержимого просто назовите его следующим образом:

$("#big-content-placeholder").html(big_template({big_data:big_data}));

И шаблон выглядит так:

<script id="big-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#each big_data}}
                <tr>
                    <td>{{name}}
                            <ul>
                                {{#details}}
                                    <li>{{username}}</li>
                                    <li>{{email}}</li>
                                {{/details}}
                            </ul>
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</script>

Ответ 4

Handlebars может использовать массив в качестве контекста. Вы можете использовать . в качестве корня данных. Таким образом, вы можете прокручивать данные массива с помощью {{#each .}}.

Вот обновленная рабочая версия вашей скрипки

Ответ 5

Использование this и {{this}}. См. Код ниже в node.js:

var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "<ul>{{#each this}}<li>{{this}}</li>{{/each}}</ul>";
var template= Handlebars.compile(source);
console.log(template(randomList));

Выход журнала консоли:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>