骨干循环并从嵌套集合中获取值

时间:2013-04-17 00:32:04

标签: javascript jquery backbone.js underscore.js backbone-model

我在访问骨干集合中的嵌套值时遇到问题。到目前为止,我已经设法获得了一些价值观。这是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
                        }
                    ]
                },

此代码为我们提供了一些运动结果,例如比赛,胜利,净胜球等。这只是该系列中其他几支球队中的一支球队。 我现在的问题是如何循环嵌套值并显示它们就像我在我的示例中所做的那样(上面的tinypic url)。我的目标是获取团队名称和统计数据,并将其显示在html中。与其他团队一样。

1 个答案:

答案 0 :(得分:0)

只需使用模板并使用foreach遍历数组即可将您的手风琴HTML放置到位。

您可以使用已包含的Underscore's templates,因为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]);

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

当然你必须调整价值观,但事情就是这样。