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

Posted 2023-02-26

【中文标题】如何使用 Sencha Touch 数据模型读取嵌套的 JSON 结构？

【英文标题】：How to read nested JSON structure with a Sencha Touch Data Model?

【发布时间】：2011-10-09 23:48:04

【问题描述】：

我整个晚上都在试图解决这个问题，但无济于事。我有一个 JSON 结构如下（来自另一个系统，所以我不能改变它的结构）：

“父母”： “父母”：[ “父ID”：1， “孩子们”： “孩子”：[ "childId":1, , "childId":2, ] , “父ID”：2， “孩子们”： “孩子”：[ "childId":1, , "childId":2, ] ], "pageNum":1, “页面大小”：2

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

Ext.regModel("父模型", 有很多： 模型：'ChildrenModel'， name: 'children.child' // 不太确定这个位 , 字段：[ 名称：'parentId'，类型：'string' ], 代理： 类型：'ajax'， 网址：'models.json'， 读者： 类型：'json'， root: 'parents.parent' // 这很好用 ); Ext.regModel('ChildrenModel', belongsTo: 'ParentModel', // 不太确定这个位 字段：[name：'childId'，类型：'string'] );

使用数据存储：

Ext.regStore('ParentModelStore', 模型：'父模型'， 自动加载：真 );

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

myapp.views.ParentView = Ext.extend(Ext.Panel, 布局：'卡片'， 初始化组件：函数（） this.list = new Ext.List( itemTpl: 新的 Ext.XTemplate( '', '', 'parentId', // 这很好用 '', '', // 这不起作用 childId '', '', ), 商店：'父商店'， ); this.listpanel = new Ext.Panel( 布局：'适合'， 项目：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 我正在回答我自己的问题：

哇！我忘了在 ParentModel 的字段中添加“children”元素。

应该如下所示（注意：我不需要指定 'hasMany' 或 'associations' 元素 - 不太清楚为什么会这样或包含它们有什么好处）：

Ext.regModel("父模型", 字段：[ name：'parentId'，类型：'string'， name: 'children' // 添加此字段非常重要 ], 代理： 类型：'ajax'， 网址：'models.json'， 读者： 类型：'json'， root: 'parents.parent' // 这很好用 ); Ext.regModel('ChildrenModel', 字段：[name：'childId'，类型：'string'] );

模板也可以正常工作：

'', // 这个语法也有效。 childId '',

【参考方案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"
  

,

---

【讨论】：

酷 - 映射有效，但是，我仍然遇到问题，因为有时会返回单个对象，有时会返回数组。我在下面提供了另一个答案以及我目前使用的解决方案。

【参考方案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 必须自动进行类型转换。