列表中呈现的骨干嵌套json对象

Backbone nested json object rendered in list

本文关键字：嵌套 json 对象 列表      更新时间：2023-09-26

我目前正在尝试在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对象没有与Backbone.Collection内联…

正如您所声明的，App.Collections.Game具有url /path/to/json，这意味着需要返回的json是一个列表。。。没有JSON 中显示的GamesList

编辑：

您可以使用Games Collection中的解析函数来修复从服务器中检索到的json

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

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

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

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

您可以将您的模型设置为：

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
});
相关文章：