2

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

上記は、私のビューに投稿のリストを正しく表示しています。パネルをプッシュして各投稿の完全なコンテンツを表示するコントローラーを追加しましたが、これは機能しています。

コントローラ

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

comments私の問題は、JSON にネストされているからデータを取得することです。

上記のコントローラーを使用すると、

[object Object],[object Object]

ビューとコンソールで、これらのオブジェクトを開いてコメント全体を表示できます。

しかし、どうすればそれらをビューに表示できますか? (例えば、どうやって表示するの"comment_text"?)

4

2 に答える 2

2

モデルに含まれるとすぐにJSONではなくなり、オブジェクトに逆シリアル化されます。それらを表示するには、XTemplateを使用する必要があります。ビュー内ですでにテンプレートを使用している場合は、オブジェクトのプロパティに直接アクセスしてレンダリングできます。それでも不明な点があれば教えてください。

なぜあなたは自分でコンテンツをhtmlプロパティに正確にレンダリングするのですか？それがパフォーマンス上の理由ですか？私はSTに慣れていないので、お願いします。とにかく、コメント配列をループして返される小さなヘルパー関数を構築して、多かれ少なかれフォーマットされた文字列として返します（これはあなた次第です。また、配列が少なくとも空であり、nullではないことを確認してください）

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,
        });
    }
于 2012-09-23T12:14:55.483 に答える
1

これが私が繰り返した別の方法です。

Json データ:

{
    "account" : [
        {
            "id": "1",
            "accNo" : "5869785254",
            "curAmt" : "25000",
            "balAmt" : "15000",
            "transdate" : [
                {
                    "date" : "10",
                    "month" : "03",
                    "description" : "Check 232",
                    "crddbt" : "-1200"
                },
                {
                    "date" : "14",
                    "month" : "03",
                    "description" : "ATM Withdrawl",
                    "crddbt" : "-500"
                }
            ],
        }
    ]
}

transdate オブジェクトを反復処理する Sencha コード。

var transDateObj = record.get('transdate');

Ext.Object.each(transDateObj, function(key, value, myself){

            Ext.Object.each(value, function(key, value, myself){
                console.log(key + ":" + value);
            });
        });
于 2012-10-06T13:56:48.893 に答える