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

Question

我目前正在尝试在 ul 中渲染这个 json 对象。我希望能够循环浏览 GamesList 并在列表中获取游戏及其属性。我有点碰壁，我不完全确定如何实现这一目标。对于 Backbone 来说仍然非常陌生，因此我们将不胜感激任何帮助。

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

Answer 1

看起来您的 JSON 对象未内联 Backbone.Collection...

如您声明的那样App.Collections.Game有网址/path/to/json这意味着需要返回的 json 是一个列表...没有 GamesList在您的 JSON 中可以看到

编辑:

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

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

重要:请注意，从服务器获取的 json 对象应该有 ID。 Backbone 会“认为”这些模型是新的，并会在保存时创建它们...