如何使用 Sencha Touch 数据模型读取嵌套的 JSON 结构? [英] How to read nested JSON structure with a Sencha Touch Data Model?

查看:13
本文介绍了如何使用 Sencha Touch 数据模型读取嵌套的 JSON 结构?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

<前>{父母":{父母":[{父母ID":1,孩子们":{孩子":[{"childId":1,},{"childId":2,}]}},{父母ID":2,孩子们":{孩子":[{"childId":1,},{"childId":2,}]}}],"pageNum":1,页面大小":2}}

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

<前>Ext.regModel("ParentModel", {有很多: {模型:'儿童模型',name: 'children.child'//不太确定这一点},字段: [{名称:'parentId',类型:'字符串'}],代理人: {类型:'阿贾克斯',网址:'models.json',读者:{类型:'json',root: 'parents.parent'//这很好用}}});Ext.regModel('ChildrenModel', {belongsTo: 'ParentModel',//不太确定这个位字段:[{名称:'childId',类型:'字符串'}]});

带有数据存储:

<前>Ext.regStore('ParentModelStore', {模型:'父模型',自动加载:真});

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

<前>myapp.views.ParentView = Ext.extend(Ext.Panel, {布局:'卡片',初始化组件:函数(){this.list = new Ext.List({itemTpl: 新的 Ext.XTemplate('<tpl for=".">','

','{parentId}',//这工作正常'

','<tpl for="children.child">',//这不起作用{childId}'</tpl>','</tpl>',),商店:'ParentStore',});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"更改为child"),则代码工作正常.

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

呸!我忘记将children"元素添加到 ParentModel 的字段中.

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

<前>Ext.regModel("ParentModel", {字段: [{名称:'parentId',类型:'字符串'},{name: 'children'}//添加此字段非常重要],代理人: {类型:'阿贾克斯',网址:'models.json',读者:{类型:'json',root: 'parents.parent'//这很好用}}});Ext.regModel('ChildrenModel', {字段:[{名称:'childId',类型:'字符串'}]});

模板也能正常工作:

<前>'<tpl for="children.child">',//这个语法也适用.{childId}'</tpl>',

解决方案

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

Ext.regModel("ParentModel", {字段: [{名称:'parentId',类型:'字符串'},{名称:'儿童',转换:功能(值,记录){如果(价值.孩子){if (value.child instanceof Array) {返回值.child;} 别的 {返回 [value.child];//转换为数组}}返回值.child;}}],代理人: {类型:'阿贾克斯',网址:'models.json',读者:{类型:'json',root: 'parents.parent'//这很好用}}});

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

I've been trying to figure this out all evening but to no avail. I have a JSON structure as follows (coming from another system so I can't change its structure):


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

However, I can't figure out what the correct structure for the data models should be. I've tried the following but it does not work. BTW, I can access the parent information. The issue is with accessing the child information. So, I guess there is something wrong with how I've set up the relationship data.


    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'}]
    });

with a data store:


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

I'm using the following template which gets me the parent information, but I can't get the child data from it:


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

What I'm struggling with is the fact that both the "child" and "parent" elements are surrounded by another element, "children" and "parents" respectively.

Any help much appreciated.

Thanks in advance,

Philip

PS If I remove the outer "children" wrapping element and just leave the inner "child" element (and change "children.child" to "child" in the model definition) the code works fine.

PPS I'm answering my own question:

Doh! I forgot to add the "children" element to the ParentModel's fields.

It should be as follows (note: I didn't need to specify the 'hasMany' or 'associations' elements - not too sure why this is or what is the benefit of including them):


    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'}]
    });

The template works fine too:


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

解决方案

I've added a converter to allow the template access the data in the model consistently regardless if a single object or an array is returned.

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

Note: I don't actually need to define the ChildrenModel. I guess I can get away without defining it as Sencha must be automatically type converting it.

这篇关于如何使用 Sencha Touch 数据模型读取嵌套的 JSON 结构?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆