Come leggere la struttura JSON annidata con un modello Sencha Touch Data?

Question

Ho cercato di capire tutto questo per tutta la serata, ma senza risultato. Ho una struttura JSON come segue (proveniente da un altro sistema, quindi non posso cambiare la sua struttura):

 

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

Tuttavia, non riesco a capire quale sia la struttura corretta per i modelli di dati dovrebbe essere. Ho provato quanto segue ma non funziona. A proposito, posso accedere alle informazioni principali. Il problema è con l'accesso alle informazioni del bambino. Quindi, immagino ci sia qualcosa di sbagliato nel modo in cui ho impostato i dati della relazione.

 

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

con un archivio dati:

 

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

Sto utilizzando il seguente modello che mi ottiene le informazioni genitore, ma non riesco a ottenere i dati da esso bambino:

 

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

Quello con cui sto lottando è il fatto che entrambi gli elementi "figlio" e "genitore" sono circondati rispettivamente da un altro elemento, "bambini" e "genitori".

Qualsiasi aiuto molto apprezzato.

Grazie in anticipo,

Philip

PS Se rimuovo le esterne "bambini" elemento di avvolgimento e lasciarmi l'elemento interno "bambino" (e il cambiamento "children.child" per "bambino" in la definizione del modello) il codice funziona bene.

PPS Sto rispondendo alla mia domanda:

Doh! Ho dimenticato di aggiungere l'elemento "bambini" ai campi di ParentModel.

Esso dovrebbe essere la seguente (nota: non ho bisogno di specificare il 'hasMany' o elementi 'associazioni - non troppo sicuro perché questo è o che cosa è il vantaggio di includere loro):

 

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

Il modello funziona bene troppo:

 

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

Answer 1

Ho aggiunto un convertitore per consentire l'accesso modello di dati nel modello coerente indipendentemente se un singolo oggetto o un array è restituito.

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

Nota: in realtà non è necessario definire il modello Children. Immagino di poter andare via senza definirlo come Sencha deve essere automaticamente convertirlo.

Answer 2

sono imbattuto in un problema simile recently..I pensare.

È necessario specificare la mappatura dei dati desiderati nel modello. Ad esempio:

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]; 
},*/ 

});

consuma questo 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" 
    } 

},

---