javascript - 无法在 Sencha Touch 2 上显示嵌套 JSON

Question

考虑这个 JSON

{
    "stream": {
        "posts": [{
            "post_id": "1",
            "post_type": "text",
            "post_thumb": "bla1",
            "comments": [{
                "comment_id": "7",
                "comment_text": "asd",
            },
            {
                "comment_id": "8",
                "comment_text": "sdf",
            }],
        }],
    }
}

和我的模型

Ext.define('MyAppApp.model.Post', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'post_id',
            'post_type',
            'post_thumb',
            'comments',
        ],
        proxy: {
            type: 'jsonp',
            url:  'http://MyApp.com/home/index_app',
            reader: {
                type:         'json',
                rootProperty: 'stream'
            }
        }
    }
});

上面正确地显示了我 View 中的帖子列表。 我添加了一个 Controller 来插入一个面板来显示每个帖子的完整内容，这是有效的。

Controller

Ext.define('MyAppApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            stream: 'homepanel'
        },
        control: {
            'homepanel list': {
                itemtap: 'showPost'
            }
        }
    },

    showPost: function(list, index, element, record) {

/////// begin code block that solved my problem

    var data     = record.get('comments');
    var comments = '';

    Ext.Array.each(data, function(item) {
        comments += [item.comment_text] + '<br />';
    });

/////// end 

        this.getStream().push({
            xtype: 'panel',
            html: [
                '<p>' + record.get('post_thumb') + '</p>',
                '<p>' + record.get('comments') + '</p>',
                comments     // added to output HTML
            ].join(''),
            scrollable: true,
            styleHtmlContent: true,
        });
    }
});

我的麻烦是从嵌套在 JSON 中的 comments 中检索数据。

使用上面的 Controller ，我得到

[object Object],[object Object]

在我的 View 和控制台中，我可以打开这些对象并查看我的全部评论。

但是如何在 View 中显示它们呢？ (例如，如何显示“comment_text”？)

Answer 1

好吧，一旦它们进入你的模型，它们就不再是 JSON，它们被反序列化为对象。要显示它们，您应该使用 XTemplate 。如果您已在 View 中使用模板，则可以直接访问对象的属性来渲染它们。如果还有什么不清楚的地方请告诉我。

为什么要自己将内容渲染到 html 属性中？这是性能原因吗？我不太习惯ST，所以我问一下。无论如何，构建一个小辅助函数，它将循环遍历注释数组并返回或多或少格式化的字符串(这将取决于您，还检查数组是否至少为空且绝不为空)

var data = record.get('comments')
function(data) {
    var result = '',
        len = data.length,
        i=0;

    for(;i<len;i++) {
        result += data[i]['comment_text'] +'<br />'
    }

    return result;
}

这里是 origin 函数的实现。我发布此文章是因为不建议使用 Ext.Array.each，因为它为每个元素执行一个函数，并且应该避免循环内的函数调用。

showPost: function(list, index, element, record) {
        var data     = record.get('comments');

        function fetchComments(data) {
            var result = '',
                len = data.length,
                i = 0;

            for(;i<len;i++) {
                result += data[i]['comment_text'] + '<br />';
            }

            return result;
        }

        this.getStream().push({
            xtype: 'panel',
            html: [
                '<p>' + record.get('post_thumb') + '</p>',
                '<p>' + fetchComments(data) + '</p>'
            ].join(''),
            scrollable: true,
            styleHtmlContent: true,
        });
    }