Цикл Backbone и получение значения из вложенной коллекции

У меня проблема с доступом к вложенным значениям в моей базовой коллекции. Пока мне удалось выделить некоторые ценности. Вот код html и javascript, а также мой результат: Код: http://jsfiddle.net/mM2Mk/4/ Результат: http://tinypic.com/r/2qn3amu/6

Однако коллекция в этом решении не соответствует структуре моего фактического api. Структура, которую я пытаюсь заставить работать, выглядит так:

teamsCollection = new Standings.Collections.TeamsCollection([
{
    credit: {
        message: "Provided by ",
        link: "",
        logoUrl: ""
    },
    metadata: { },
    groups: [
        {
            labels: [ ],
            standings: [
                {
                    team: {
                        id: 9369,
                        name: "IF Elfsborg",
                        shortName: "Elfsborg",
                        link: ""
                    },
                    stats: [
                        {
                            name: "gp",
                            value: 30
                        },
                        {
                            name: "w",
                            value: 18
                        },
                        {
                            name: "d",
                            value: 5
                        },
                        {
                            name: "l",
                            value: 7
                        },
                        {
                            name: "gf",
                            value: 48
                        },
                        {
                            name: "ga",
                            value: 29
                        },
                        {
                            name: "gd",
                            value: 19
                        },
                        {
                            name: "pts",
                            value: 59
                        }
                    ]
                },
      {
                    team: { 
                        id: 19740,
                        name: "BK Häcken",
                        shortName: "Häcken",
                        link: ""
                    },
                    stats: [
                        {
                            name: "gp",
                            value: 30
                        },
                        {
                            name: "w",
                            value: 17
                        },
                        {
                            name: "d",
                            value: 6
                        },
                        {
                            name: "l",
                            value: 7
                        },
                        {
                            name: "gf",
                            value: 67
                        },
                        {
                            name: "ga",
                            value: 36
                        },
                        {
                            name: "gd",
                            value: 31
                        },
                        {
                            name: "pts",
                            value: 57
                        }
                    ]
                },

Этот код дает нам некоторые спортивные результаты, такие как сыгранные игры, победы, разница мячей и т. Д. Это только одна команда из нескольких других, которые следуют в коллекции. Мой вопрос теперь в том, как мне перебрать вложенные значения и отобразить их так же, как в моем примере (URL-адрес tinypic выше). Моя цель - получить название команды вместе со статистикой и отобразить их в HTML. И так далее с остальными командами.


person Mati Kowa    schedule 17.04.2013    source источник


Ответы (1)


Просто используйте шаблон и прокрутите свой массив с помощью foreach, чтобы вставить HTML-код аккордеона.

Вы можете использовать шаблоны Underscore, которые уже включены, поскольку Underscore является зависимостью Backbone.
Или вы можете используйте другой механизм шаблонов, например Handlebars: source.

Оба дают примеры того, как перебирать объекты.

Изменить:
Давайте сделаем случайный шаблон (с подчеркиванием, это сложнее):

<script id="myTemplate">
<% _.each(standings, function(standing) { %>
  <a href="<%= standing.team.link %>"><%= standing.team.name %></a><br/>
  <ul>
  <% _.each(standing.stats, function(stat) { %>
    <li><%= stat.name %>: <%= stat.value %></li>
  <% } %>
  </ul>
<% } %>
</script>

Затем скомпилируйте его и вызовите с помощью ваших групп [0] или что-то в этом роде.

_.template($('#myTemplate').html(), groups[0]);

or

var myTemplate = _.template($('#myTemplate').html());
myTemplate(groups[0]);

Конечно, вам придется адаптировать значения, но вот в чем дело.

person Loamhoof    schedule 17.04.2013
comment
Привет, Loamhoof! Спасибо за ваш ответ. Я безуспешно пытался использовать подчеркивание и руль. У меня нет большого опыта, когда дело касается магистрали и подчеркивания, поэтому я надеялся на возможное решение в коде. Не могли бы вы привести пример того, как будет выглядеть решение? - person Mati Kowa; 18.04.2013