Sencha TouchデータモデルでネストされたJSON構造を読み取る方法は？

Question

私は夕方にこれを理解しようとしてきましたが、役に立たなかった。次のように私は（私は、その構造を変更することはできませんので、他のシステムから来る）JSON構造を持っている：

 

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

しかし、私はデータモデルのための正しい構造がどうあるべきかを把握することはできません。私は以下を試しましたが、うまくいきません。ところで、私は親情報にアクセスすることができます。問題は、子情報にアクセスすることです。だから、私は関係データをどのように設定したかに何か問題があると思う。データストアと

 

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

：

 

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

私は私の親の情報を取得し、次のテンプレートを使用していますが、私はそれから子データを取得することはできません。

 

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

私が苦労しているのは、「子」要素と「親」要素の両方がそれぞれ別の要素「子供」と「親」に囲まれているという事実です。

ご迷惑をおかけして申し訳ございません。事前に

おかげで、

フィリップ

PS私は外側の「子供」ラップ要素を削除し、ちょうど内側の「子」要素（および変更「children.child」を「子」の中のままにした場合モデル定義）コードは正常に動作します。

PPS私は自分の質問に答えています：

Doh！私はParentModelのフィールドに "children"要素を追加するのを忘れていました。

（注：私は「hasManyの」または「団体」要素を指定する必要はありませんでした - ではない理由ですか、それらを含むことの利点は何あまりにも確認してください）：次のようにそれがあるべき

 

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

を

テンプレートがあまりにも正常に動作します：

 

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

Answer 1

をIは、単一のオブジェクトまたは配列の場合、テンプレートは、一貫して関係なく、モデル内のデータにアクセスできるようにするコンバータを追加しました戻ってきた。

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

注：実際には、私はChildrenModelを定義する必要はありません。 Senchaが自動的に型変換する必要があるので、私はそれを定義することなく離れていくことができると思います。

Answer 2

と思うrecently..I同様の問題に遭遇しました。

モデルに必要なデータへのマッピングを指定する必要があります。 たとえば、

Ext.regModel('Album', { 
fields: [ 
    {name: 'artist_name', mapping: 'album.artist.name'}, 
    {name: 'artist_token', mapping: 'album.artist.token'}, 
    {name: 'album_name', mapping: 'album.name'}, 
    {name: 'token', mapping: 'album.token'}, 
    {name: 'small_cover_url', mapping: 'album.covers.s'}, 
    {name: 'large_cover_url', mapping: 'album.covers.l'} 
]/*, 
getGroupString : function(record) { 
    return record.get('artist.name')[0]; 
},*/ 

}）;

このJSONを消費：

{ 
    "album":{ 
    "covers":{ 
     "l":"http://media.audiobox.fm/images/albums/V3eQTPoJ/l.jpg?1318110127", 
     "m":"http://media.audiobox.fm/images/albums/V3eQTPoJ/m.jpg?1318110127", 
     "s":"http://media.audiobox.fm/images/albums/V3eQTPoJ/s.jpg?1318110127" 
    }, 
    "artist":{ 
     "name":"New Order", 
     "token":"OyOZqwkN" 
    }, 
    "name":"(The Best Of)", 
    "token":"V3eQTPoJ" 
    } 

}、

---