Question

我正在解析一个相对复杂的JSON文件，但在列表中呈现它时会遇到麻烦。

JSON的摘录（精简版）是这样的：

{"root":[
  {
     "success":"true",
     "text":"Vecka 2, 14 januari 2011",
     "chart":[
        {
           "pbpl":"1",
           "arso":"JAY SMITH",
           "tit":"JAY SMITH",
           "labl":"COLUMBIA",
           "buyExt":[
              {
                 "storeId":"61002",
                 "buyPri":"100",
                 "buyURL":"http://clk.tradedoubler.com/click?p=46&a=1861394&url=http%3A%5C%5Ccdon.se%5Cmusik%5Csmith_jay%5Cjay_smith-13014585"
              },
              {
                 "storeId":"61010251",
                 "buyPri":"130",
                 "buyURL":"http://www.bengans.se/Product.aspx?skivkod=882785"
              },
           ]
        },
        {
           "pbpl":"2",
           "arso":"ROBYN",
           "tit":"BODY TALK PT.2",
           "labl":"KONICHIWA RECORDS",
           "buyExt":[
              {
                 "storeId":"61002",
                 "buyPri":"100",
                 "buyURL":"http://clk.tradedoubler.com/click?p=46&a=1861394&url=http%3A%5C%5Ccdon.se%5Cmusik%5Crobyn%5Cbody_talk_pt.2-11318544"
              },
              {
                 "storeId":"61010251",
                 "buyPri":"130",
                 "buyURL":"http://www.bengans.se/Product.aspx?skivkod=870725"
              },
           ]
        },
        ...

这是模型：

Ext.regModel('Chart', {
    fields: [
        {name: 'text', type: 'string'},
        {name: 'chart', fields: [
            {name: 'arso', type: 'string'},
            {name: 'tit', type: 'string'},
            {name: 'pbpl', type: 'integer'}
        ]}
    ]
});

我正在使用的模板是：

app.chartItemTpl = new Ext.XTemplate(
    '<tpl for="chart">',
    '   <div class="thumb-wrap chart_row" id="{#}">',
    '       <table>',
    '           <tr>',
    '               <td class="chart_pbpl">{#}</td>',
    '               <td class="chart_album">',
    '                   <span class="arso">{arso}</span><br />',
    '                   <span class="tit">{tit}</span><br />',
    '               </td>',
    '           </tr>',
    '       </table>',
    '   </div>',
    '   <div style="clear: both"></div>',
    '</tpl>'
);

问题在于不会为每个“图表”条目创建元素。相反，它只创建一个列表项，但循环其中的“图表”条目，呈现一个巨大的唯一项目。

商店是这样的：

Ext.regStore('ChartsStore', {
    model: 'Chart',
    proxy: {
        type: 'scripttag',
        reader: {
            type: 'json',
            root: 'root'
        }
    },
    getGroupString: function (record) {
        if (record && record.data.text) {
            return record.get('text');
        } else {
            return 'No description';
        }
    }
});

任何人都知道如何解决这个问题？谢谢， Arttie

Answer 1

由于这是一个List，您需要为一个单独的列表项提供模板，而不是为整个列表提供模板，即不循环遍历所有图表元素，只有一个这样的元素的模板。如果您的列表商店已正确设置，则只需删除'<tpl for="chart">'和'</tpl>'，该模板即可运行。列表本身通过它的元素应用循环。

Answer 2

注意：我的回答是基于Sencha Touch 2.3.0。

你在这里尝试做的事情看起来有点令人困惑。通常情况下，您需要在rootProperty root上设置一个proxie（不是reader），指向JSON中包含所有对象的对象被列入一个列表，换句话说，就是迭代。在这种情况下，类似于rootProperty: 'root[0].charts'，考虑到您没有使用JSON上对象text之外的字段charts。

然后，考虑到您需要arso和tit，您的模型会是这样的。您可以使用pbpl替换#值，因为您的XTemplate不需要循环。

Ext.regModel('Chart', {
    fields: [
        "pbpl",
        "arso",
        "tit",
       ]
    ]
});

您的XTemplate将是：

app.chartItemTpl = new Ext.XTemplate([
    '   <div class="thumb-wrap chart_row" id="{pbpl}">',
    '       <table>',
    '           <tr>',
    '               <td class="chart_pbpl">{pbpl}</td>',
    '               <td class="chart_album">',
    '                   <span class="arso">{arso}</span><br />',
    '                   <span class="tit">{tit}</span><br />',
    '               </td>',
    '           </tr>',
    '       </table>',
    '   </div>',
    '   <div style="clear: both"></div>'].join();
);

了解我如何制作数组并使用方法array.join()将其全部合并为一个字符串。

你的商店将是：

Ext.regStore('ChartsStore', {
    model: 'Chart',
    proxy: {
        type: 'json',
        reader: {
            type: 'json',
            root: 'root[0].chart' // For some reason, root is an "array", that's why the "[0]". No sure if this works on Sencha Touch 2.3.0.
        }
    },
    getGroupString: function (record) {
        if (record && record.data.text) {
            return record.get('text');
        } else {
            return 'No description';
        }
    }
});

我已将proxy type更改为json，因为我无法找到类型scripttag在Sencha Touch 2.3文档中。

我知道这是一个非常古老的问题，但我想回答它。

在列表中使用XTemplate的Senha Touch复杂模型

2 个答案: