Javascript 在列表中呈现的主干嵌套json对象

我目前正试图在ul中呈现这个json对象。我希望能够循环浏览GamesList，并在列表中获取游戏及其属性。我碰到了一堵墙，我不完全确定如何做到这一点。对于主干网来说仍然是非常新的，因此任何帮助都将不胜感激

JSON对象：

{
   "GamesList":[
      {
         "Date":"2013/07/02",
         "Games":[
            {
               "Id":"3252",
               "Time":"12:10 AM"
            }
         ]
      },
      {
         "Date":"2013/07/02",
         "Games":[
            {
               "Id":"3252",
               "Time":"12:10 AM"
            }
         ]
      },
      {
         "Date":"2013/07/02",
         "Games":[
            {
               "Id":"3252",
               "Time":"12:10 AM"
            }
         ]
      }
   ]
}

应用程序结构：

 App.Models.Game = Backbone.Model.extend({
        defaults: {
            GamesList: ''
        }
    });


    App.Collections.Game = Backbone.Collection.extend({
        model: App.Models.Game,
        url: 'path/to/json',

        parse: function (response) {
            return response;
        }
    });

    App.Views.Games = Backbone.View.extend({
        tagName: 'ul',

        initialize: function () {
            this.collection = new App.Collections.Game();
            this.listenTo(this.collection, 'reset', this.render, this);
            this.collection.fetch();
        },

        render: function () {
            //filter through all items in a collection
            this.collection.each(function (game) {
                var gameView = new App.Views.Game({
                    model: game
                });
                this.$el.append(gameView.render().el);
            }, this)

            return this;
        }
    });

    App.Views.Game = Backbone.View.extend({
        tagName: 'li',

        template: _.template($('#gameTemplate').html()),

        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });


    var gameCollection = new App.Collections.Game();
    gameCollection.fetch({
        data: {
            collection_id: 25
        },
        success: function (data, textStatus, jqXHR) {
            console.log(data);
            console.log(textStatus);
            console.log(jqXHR);
            console.log('success');


        },
        error: function () {
            alert('Oh noes! Something went wrong!')
        }
    });

    var gamesView = new App.Views.Games({
        collection: gameCollection
    });


    $(document.body).append(gamesView.render().el);

---

看起来您的JSON对象没有与主干线内联。集合

正如您声明的那样，

App.Collections.Game

具有url

/path/to/json

，这意味着需要返回的json是一个列表。。。没有JSON中显示的

GamesList

编辑：

您可以在游戏集合中使用parse函数来修复从服务器检索到的json

parse:function(response){
      return response.GamesList;
}

重要：

---

请注意，从服务器获取的json对象应该具有ID。主干将“认为”这些模型是新的，并将在保存时创建它们

我看到里面有点混乱。让我们一步一步地进行：

---------评论后---------

您可以将模型设置为：

defaults: {
    Date:'',
    Games:''
}

然后将解析函数修改为

parse: function (response)
{
    var _this = this;
    _.map(response, function(obj) {
        _this.add(obj)
    });
}

通过这种方式，您可以按照模型的预期在集合中添加每一项

我看到的另一个问题是，您创建和获取集合两次：

...
this.collection = new App.Collections.Game();
this.listenTo(this.collection, 'reset', this.render, this);
this.collection.fetch();
...

然后

var gameCollection = new App.Collections.Game();
...
gameCollection.fetch({
    data: {
    ....
...
var gamesView = new App.Views.Games({
    collection: gameCollection
});

---

你的代码看起来很合理。您是否遇到错误？我想我很难理解的是，在列表项中，我应该说在哪里呈现游戏ID属性。我觉得我的游戏模型可能与JSON结构不正确。我错了吗？好吧，酷。那么加上这个，我应该能够访问GamesList中的元素？有什么方法可以测试我是否能够锁定列表中的第一个游戏[{“Id”：“3252”}]。@Anks-一旦获取列表，它将自动将它们解析为App.Models.Game Models，因此，您可以通过id或任何其他属性从集合中访问它们。如果我无法修改json，而这正是我必须处理的问题，该怎么办？正如ekeren所说，添加

return response.GamesListparse（）

func中，从

defaults:{GameList:'}