1

Flex アプリでは、メタデータは xml としてロードされ、xml ノードを深く検索するための非常に優れた機能を備えています。extjs バージョンでは、xml データを json に変換し、深い階層コンテンツを保持し、json リーダーを使用して extjs ストアにロードしています。モデルは検索機能を追加しないため (?)、これは必要ないと判断して、モデルを作成していません。関数、store.findRecord などを使用できる store.find、store.findBy を見ていますが、これらの関数は非常に「1 レベル」に見えます。「タブ」「ノード」に移動し、「タブ 1」の「名前」を持つその子「タブ」を見つけ、その属性「タイトル」の値を見つける必要があります...説明「ノード」を使用していますが、階層的なjsonデータです。これを行うストア機能がありませんか?ストアを使用する必要がありますか? 生の json データ - json の方が優れた検索機能を持っていますか、それともすべての「ノード」をループしてブルート フォース JavaScript に戻しますか? ループを避けて、何らかの関数を見つけたいと思っていました。いつものように、ティア

4

1 に答える 1

4

私たちのコメントから私が理解したのは、できるだけ早く簡単にJSONデータにアクセスするには、ちょっとしたストレージが必要だということです。JSON はJavaScript Object Notationを意味するので、オブジェクトです!

わかりました、2 つの例を挙げます。まず、JSON データをセットアップします。

{
    "users": [{
        "user": {
            "id": 0 ,
            "name": "foo" ,
            "age": 22 ,
            "skills": [{
                "type": "bowcrafting" ,
                "skillLevel": 50 ,
                "levels": [10, 25, 50, 75, 90, 95, 99, 100]
            }]
        }} , { 
        "user": {
            "id": 1 ,
            "name": "bar" ,
            "age": 71 ,
            "skills": [{
                "type": "fencing" ,
                "skillLevel": 32 ,
                "levels": [10, 25, 50, 90, 95, 99, 100]
            } , {
                "type": "swordsmanship" ,
                "skillLevel": 73 ,
                "levels": [10, 25, 50, 75, 80, 85, 90, 95, 99, 100]
            }]
        }} , {
        "user": {
            "id": 2 ,
            "name": "foobar" ,
            "age": 132 ,
            "skills": [{
                "type": "tactics" ,
                "skillLevel": 90 ,
                "levels": [10, 25, 50, 90, 95, 99, 100]
            } , {
                "type": "carpentery" ,
                "skillLevel": 86 ,
                "levels": [10, 25, 50, 75, 90, 95, 99, 100]
            } , {
                "type": "hiding" ,
                "skillLevel": 100 ,
                "levels": [10, 25, 50, 65, 75, 80, 85, 90, 95, 99, 100]
            }]
        }
    }]
}

ここで、次の 2 つの方法があります。

最初の方法: 上記の JSON がnested-json.jsonというファイルに保存され、単純なストアでそれを読み取ることができます。それよりも、findBy検索を使用して、必要なものを見つけることができます。

var jstore = Ext.create ('Ext.data.Store', {
    fields: ['id', 'name', 'age', 'skills'] ,

    proxy: {
        type: 'ajax' ,
        url: 'nested-json.json' ,
        reader: {
            type: 'json' ,
            root: 'users' ,
            record: 'user' ,
            idProperty: 'id'
        }
    } ,

    autoLoad: true
});

Ext.create ('Ext.button.Button', {
    text: 'Push me' ,
    renderTo: Ext.getBody () ,
    handler: function (btn) {
        var index = jstore.findBy (function (user, id) {
            // Here's the hint
            if (user.data.skills.skillLevel === 50) return id;
            else return -1;
        });

        if (index != -1) {
            // It will print 'foo' because it's the user
            // that has the skillLevel equal to 50
            console.log (jstore.getAt(index).get ('name'));
        }
    }
});

もう 1 つの方法は、上記の JSONを object として想像し、生の JSON データから直接読み取ることです。この時点で、JavaScript オブジェクトとして使用します。

// Users model: required by JSON reader
Ext.define ('Users', {
    extend: 'Ext.data.Model' ,
    fields: ['id', 'name', 'age', 'skills']
});

// JSON reader
var jreader = Ext.create ('Ext.data.reader.Json', {
    model: 'Users' ,
    root: 'users' ,
    record: 'user' ,
    idProperty: 'id'
});

// Reads records directly from raw JSON
var users = jreader.readRecords ({
    "users": [{
        "user": {
            "id": 0 ,
            "name": "foo" ,
            "age": 22 ,
            "skills": [{
                "type": "bowcrafting" ,
                "skillLevel": 50 ,
                "levels": [10, 25, 50, 75, 90, 95, 99, 100]
            }]
        }} , { 
        "user": {
            "id": 1 ,
            "name": "bar" ,
            "age": 71 ,
            "skills": [{
                "type": "fencing" ,
                "skillLevel": 32 ,
                "levels": [10, 25, 50, 90, 95, 99, 100]
            } , {
                "type": "swordsmanship" ,
                "skillLevel": 73 ,
                "levels": [10, 25, 50, 75, 80, 85, 90, 95, 99, 100]
            }]
        }} , {
        "user": {
            "id": 2 ,
            "name": "foobar" ,
            "age": 132 ,
            "skills": [{
                "type": "tactics" ,
                "skillLevel": 90 ,
                "levels": [10, 25, 50, 90, 95, 99, 100]
            } , {
                "type": "carpentery" ,
                "skillLevel": 86 ,
                "levels": [10, 25, 50, 75, 90, 95, 99, 100]
            } , {
                "type": "hiding" ,
                "skillLevel": 100 ,
                "levels": [10, 25, 50, 65, 75, 80, 85, 90, 95, 99, 100]
            }]
        }
    }]
});

// Here's the magic
Ext.each (users.records, function (user) {
    console.log ('*** USER ***');
    console.log (user);

    console.log ('id: ' + user.get ('id'));
    console.log ('name: ' + user.get ('name'));
    console.log ('age: ' + user.get ('age'));

    Ext.each (user.get ('skills'), function (skill) {
        console.log ('*** SKILL ***');
        console.log (skill);

        console.log ('type: ' + skill.type);
        console.log ('level: ' + skill.skillLevel);

        console.log ('*** LEVELS ***');
        Ext.each (skill.levels, function (level) {
            console.log (level);
        });
    });
});

この最後のものをテストするためのjsfiddleを次に示します。

私はあなたが要求したことを理解したことを願っています. そうでない場合は、自分で作成した例を教えてください;)

于 2012-09-18T18:42:01.327 に答える