如何使用Sencha Touch数据模型读取嵌套的JSON结构？

Question

我整个晚上一直试图解决这个问题,但无济于事.我有一个JSON结构如下(来自另一个系统所以我不能改变它的结构):

    {
        "parents":{
            "parent":[
             {
                 "parentId":1,
                 "children":{
                     "child":[
                      {
                          "childId":1,
                      },
                      {
                          "childId":2,
                      }
                   ]
                }
             },
             {
                "parentId":2,
                "children":{
                   "child":[
                      {
                         "childId":1,
                      },
                      {
                         "childId":2,
                      }
                   ]
                }
             }
          ],
          "pageNum":1,
          "pageSize":2
       }
    }

但是,我无法弄清楚数据模型的正确结构应该是什么.我尝试了以下但它不起作用.顺便说一下,我可以访问父信息.问题在于访问子信息.所以,我想我如何设置关系数据有问题.

    Ext.regModel("ParentModel", {
        hasMany: { 
            model: 'ChildrenModel', 
            name: 'children.child' // not too sure about this bit
        },
        fields: [
            {name: 'parentId', type: 'string'}
        ],

        proxy: {
            type: 'ajax',
            url : 'models.json',
            reader: {
                type: 'json',
                root: 'parents.parent' // this works fine
            }
        }
    });

    Ext.regModel('ChildrenModel', {
        belongsTo: 'ParentModel', // not too sure about this bit
        fields: [{name: 'childId', type: 'string'}]
    });

使用数据存储:

    Ext.regStore('ParentModelStore', {
        model: 'ParentModel',
        autoLoad:true
    });

我正在使用以下模板获取父信息,但我无法从中获取子数据:

    myapp.views.ParentView = Ext.extend(Ext.Panel, {
        layout: 'card',

        initComponent: function() {
            this.list = new Ext.List({
                itemTpl: new Ext.XTemplate(
                    '<tpl for=".">',
                        '<div>',
                            '{parentId}', // this works fine
                        '</div>',
                        '<tpl for="children.child">', // this doesn't work
                              {childId}
                        '</tpl>',
                    '</tpl>',
                ),
                store: 'ParentStore',
            });

            this.listpanel = new Ext.Panel({
                layout: 'fit',
                items: this.list,
            });

            this.items = this.listpanel;

            myapp.views.ParentView.superclass.initComponent.apply(this, arguments);
        },

    });

    Ext.reg('ParentView', myapp.views.ParentView);

我正在努力的是,"孩子"和"父母"元素分别被另一个元素"儿童"和"父母"包围.

任何帮助非常感谢.

提前致谢,

菲利普

PS如果我删除外部的"children"包装元素并且只留下内部的"child"元素(并在模型定义中将"children.child"更改为"child"),则代码可以正常工作.

PPS我正在回答我自己的问题:

卫生署!我忘了将"children"元素添加到ParentModel的字段中.

它应该如下(注意:我不需要指定'hasMany'或'associations'元素 - 不太清楚为什么这是或包含它们的好处是什么):

    Ext.regModel("ParentModel", {
        fields: [
            {name: 'parentId', type: 'string'},
            {name: 'children'} // VERY IMPORTANT TO ADD THIS FIELD
        ],

        proxy: {
            type: 'ajax',
            url : 'models.json',
            reader: {
                type: 'json',
                root: 'parents.parent' // this works fine
            }
        }
    });

    Ext.regModel('ChildrenModel', {
        fields: [{name: 'childId', type: 'string'}]
    });

该模板也可以正常工作:

    '<tpl for="children.child">', // this syntax works too.
          {childId}
    '</tpl>',

Answer 1

最近遇到了类似的问题......我想.

您需要指定映射到模型中所需的数据.例如 :

Ext.regModel('Album', {
fields: [
    {name: 'artist_name', mapping: 'album.artist.name'},
    {name: 'artist_token', mapping: 'album.artist.token'},
    {name: 'album_name', mapping: 'album.name'},
    {name: 'token', mapping: 'album.token'},
    {name: 'small_cover_url', mapping: 'album.covers.s'},
    {name: 'large_cover_url', mapping: 'album.covers.l'}
]/*,
getGroupString : function(record) {
    return record.get('artist.name')[0];
},*/

});

使用此JSON:

   {
  "album":{
     "covers":{
        "l":"http://media.audiobox.fm/images/albums/V3eQTPoJ/l.jpg?1318110127",
        "m":"http://media.audiobox.fm/images/albums/V3eQTPoJ/m.jpg?1318110127",
        "s":"http://media.audiobox.fm/images/albums/V3eQTPoJ/s.jpg?1318110127"
     },
     "artist":{
        "name":"New Order",
        "token":"OyOZqwkN"
     },
     "name":"(The Best Of)",
     "token":"V3eQTPoJ"
  }

},

Answer 2

我添加了一个转换器,允许模板一致地访问模型中的数据,无论是否返回单个对象或数组.

Ext.regModel("ParentModel", {
        fields: [
            {name: 'parentId', type: 'string'},
            {name: 'children', convert: 
            function(value, record) {
                if (value.child) {
                    if (value.child instanceof Array) {
                        return value.child;
                    } else {
                        return [value.child]; // Convert to an Array 
                    }
                }

                return value.child;
            }
        }
        ],

        proxy: {
            type: 'ajax',
            url : 'models.json',
            reader: {
                type: 'json',
                root: 'parents.parent' // this works fine
            }
        }
    });

注意:我实际上不需要定义ChildrenModel.我想我可以在没有定义它的情况下逃脱,因为Sencha必须自动进行类型转换.