2013-05-14 6 views
18

Sono molto confuso sull'utilizzo del metodo di recupero del modello backbone.js. Vedere il seguente esempio
router dorsale:come funziona il metodo di recupero del modello backbone.js

profile: function(id) { 
    var model = new Account({id:id}); 
    console.log("<---------profile router-------->"); 
    this.changeView(new ProfileView({model:model})); 
    model.fetch(); 
} 

il primo passo, sarà istanziato l'account del modello, il modello di conto si presenta così.

define(['models/StatusCollection'], function(StatusCollection) { 
    var Account = Backbone.Model.extend({ 
    urlRoot: '/accounts', 

    initialize: function() { 
     this.status  = new StatusCollection(); 
     this.status.url = '/accounts/' + this.id + '/status'; 
     this.activity  = new StatusCollection(); 
     this.activity.url = '/accounts/' + this.id + '/activity'; 
    } 
    }); 

    return Account; 
}); 

proprietà urlRoot per cosa si tratta? Dopo la creazione dell'oggetto modello, la vista panoramica verrà visualizzata con questo this.changeView (nuovo ProfileView ({model: model}));, la funzione changeview appare così.

changeView: function(view) { 
    if (null != this.currentView) { 
    this.currentView.undelegateEvents(); 
    } 
    this.currentView = view; 
    this.currentView.render(); 
}, 

dopo render vista, informazioni del profilo non visualizza ancora, ma dopo model.fetch(); L'istruzione viene eseguita, i dati dal modello verranno visualizzati, perché? Non so davvero come funziona, cerco di scoprirlo, ma nessuna possibilità.

risposta

38

Non sono del tutto sicuro di quale sia la tua domanda, ma farò del mio meglio per spiegare quello che posso.

Il concetto alla base di urlRoot è che sarebbe l'URL di base e gli elementi figlio verranno recuperati al di sotto di esso con l'ID aggiunto a tale urlRoot.

Ad esempio, il seguente codice:

var Account = Backbone.Model.extend({ 
    urlRoot: '/accounts' 
}); 

imposterà l'URL di base. Quindi se si dovesse creare un'istanza di questo e chiamare fetch():

var anAccount = new Account({id: 'abcd1234'}); 
anAccount.fetch(); 

Renderebbe la seguente richiesta:

GET /accounts/abcd1234 

Nel tuo caso lì, si sta impostando l'UrlRoot e quindi impostando in modo esplicito un URL quindi l'urlRoot che hai fornito verrebbe ignorato.

vi incoraggio a esaminare la fonte Backbone (è sorprendentemente succinta) per vedere come l'url è derivato: http://backbonejs.org/docs/backbone.html#section-65

Per rispondere alla tua altra domanda, la ragione per le informazioni del profilo non visualizzerà immediatamente è che fetch () esce in rete, va al tuo server e deve attendere una risposta prima che possa essere visualizzata.

Questo non è un istante.

Viene eseguito in modo non bloccante, vale a dire che farà la richiesta, continuerà a fare ciò che sta facendo e quando la richiesta ritorna dal server, genera un evento che Backbone utilizza per assicurarsi qualcos'altro quello che doveva essere fatto, ora che hai i dati del modello, è fatto.

ho messo alcuni commenti nel tuo snippet di spiegare cosa sta succedendo qui:

profile: function(id) { 
    // You are instantiating a model, giving it the id passed to it as an argument 
    var model = new Account({id:id}); 
    console.log("<---------profile router-------->"); 

    // You are instantiating a new view with a fresh model, but its data has 
    // not yet been fetched so the view will not display properly 
    this.changeView(new ProfileView({model:model})); 

    // You are fetching the data here. It will be a little while while the request goes 
    // from your browser, over the network, hits the server, gets the response. After 
    // getting the response, this will fire a 'sync' event which your view can use to 
    // re-render now that your model has its data. 
    model.fetch(); 
} 

Quindi, se si vuole garantire la visualizzazione viene aggiornata dopo che il modello è stata scaricata ci sono alcuni modi si può fare ciò: (1) passare un callback di successo al modello.fetch() (2) registra un gestore sulla tua vista guarda per l'evento 'sync', ridisegna la vista quando ritorna (3) inserisce il codice per istanziare la tua vista in una callback riuscita, in questo modo la vista non essere creato fino a dopo il ritorno della richiesta di rete e il modello ha i suoi dati.

+0

prima grazie per la risposta, è una descrizione molto bella. ho qualche domanda in più, dopo che fetch() ha attivato l'evento 'sync', la vista verrà renderizzata automaticamente? i suggerimenti che mi dai, puoi fare alcuni esempi, perchè sono abbastanza nuovo in backbonejs e javascript, conosco bene quella lingua, ma non molto bene. –

+0

l'urlroot sarà override giusto? Cuz di questa var base = _.result (this, 'urlRoot') || _.result (this.collection, 'url') || URLError() ;? –

+0

Per la tua prima domanda, nessun evento di sincronizzazione non renderà automaticamente la vista. Se si desidera abilitare questo, aggiungere il seguente: "view.on ('sync', this.render, this);" –