2012-03-28 1 views
10

ho due modelli backbone, caricati dai server:Backbone complesso JS modello prendere

var Model = Backbone.Model.extend({}); 
var SubModel = Backbone.Model.extend({}); 

var SubCollection = Backbone.Collection.extend({ 
    model: SubModel 
}); 

var m = new Model(); 
m.fetch({success: function(model) 
{ 
    model.submodels = new SubCollection(); 
    model.submodels.url = "/sub/" + model.get("id"); 
    model.submodels.fetch(); 
}}); 

Quindi, il server deve inviare due risposte distinte. Per esempio:

{ name: "Model1", id: 1 } // For Model fetch 

e

[{ name: "Submodel1", id: 1 }, { name: "Submodel2", id: 2 }] // For Submodel collection fetch 

C'è un modo per andare a prendere un esempio di modello con la raccolta sottomodello in una sola volta, come:

{ 
    name: "Model1", 
    id: 1, 
    submodels: [{ name: "Submodel1", id: 2 }, { name: "Submodel1", id: 2 }] 
} 

risposta

11

Per essere in grado di fare che è fino al tuo back-end - non ha davvero nulla a che fare con Backbone.

È possibile configurare la tecnologia di back-end per restituire modelli correlati come risorse nidificate?

Se il back-end è Rails, per esempio, e le tue modelle sono legati in ActiveRecord, un modo di fare questo è qualcosa di simile a

respond_to do |format| 
    format.json { render :json => @model.to_json(:include => [:submodels])} 
end 

Quale tecnologia back-end stai usando?

Edit:

Spiacenti, frainteso il senso della tua domanda, una volta che hai il tuo back-end di restituire il JSON nel formato corretto, sì, ci sono cose che devi fare in Backbone per essere in grado di gestirlo

Backbone-Relazionale

Un modo per affrontare il problema è quello di utilizzare Backbone-Relational, un plug-in per la gestione di modelli relativi.

di definire modelli correlati attraverso una proprietà 'relazioni':

SubModel = Backbone.RelationalModel.extend({}); 

SubCollection = Backbone.Collection.extend({ 
    model: SubModel 
}); 

Model = Backbone.RelationalModel.extend({ 
    relations: [ 
    { 
     type: 'HasMany', 
     key: 'submodels', 
     relatedModel: 'SubModel', 
     collectionType: 'SubCollection' 
    } 
    ] 
}); 

Quando il modello va a prendere il JSON, si creerà automaticamente una sottoraccolta sotto proprietà 'sottomodelli' e popolarlo con sottomodelli - uno per ogni Oggetto JSON nell'array.

jsfiddle per backbone-relazionale: http://jsfiddle.net/4Zx5X/12/

By Hand

È possibile farlo a mano se si desidera così. Nel coinvolge sovrascrivendo la funzione parse per la classe del modello (mi perdoni se la mia JS non è corretta al 100% - state facendo CoffeeScript tanto ultimamente la sua cablato nel cervello)

var Model = Backbone.Model.extend({ 
    parse: function(response) { 
    this.submodels = new SubCollection(); 
    // Populate your submodels with the data from the response. 
    // Could also use .add() if you wanted events for each one. 
    this.submodels.reset(response.submodels); 
    // now that we've handled that data, delete it 
    delete response.submodels; 
    // return the rest of the data to be handled by Backbone normally. 
    return response; 
    } 
}); 

parse() viene eseguito prima inizializzazione() e prima che l'hash degli attributi sia impostato, quindi non puoi accedere a model.attributes e model.set() fallisce, quindi dobbiamo impostare la collezione come una proprietà diretta del modello, e non come una "proprietà" che tu avrebbe accesso con get/set.

A seconda di ciò che si desidera eseguire su "save()" potrebbe essere necessario eseguire l'override di `toJSON 'per ottenere la versione serializzata del modello in modo che assomigli alle aspettative dell'API.

jsfiddle:

http://jsfiddle.net/QEdmB/44/

+0

ben ... back-end è CPP (e non ci sono modi per cambiare a Rails o Django) :) ma, per quanto ho fatto a mano capito, la tua soluzione formatterà la risposta come un JSON dato nella mia domanda ... quindi, backbone non interpreterà gli oggetti nella matrice "submodels" come Submodels ... ho ragione? –

+0

La variante con backbone-relazionale non sembra funzionare correttamente, perché la matrice "submodels" diventa una matrice di oggetti, non SubModels Ho testato un po 'il tuo violino, guarda per favore http://jsfiddle.net/4Zx5X/3/ –

+0

Ok, ci proverò su una vera richiesta Ajax. Comunque, grazie per la tua risposta dettagliata! –