Backbone - esecuzione di più fetch() prima di eseguire il rendering di una vista

Question

Mi stavo chiedendo il miglior schema/approccio qui. Questa è una funzione del mio router, quindi l'utente preme "virgolette /: id", ma per renderizzare quella vista, ho bisogno di un elenco dei loro progetti, clienti e valute. Quale sarebbe il modo migliore per assicurarsi che tutti e 3 i recuperi() si siano verificati prima di tentare di creare un'istanza della vista quotesEdit? È considerato una cattiva pratica prendere tutte le informazioni quando l'utente fa clic su qualcosa?

quotesEdit: function(id) { 
     kf.Collections.quotes = kf.Collections.quotes || new kf.Collections.Quotes(); 
     kf.Collections.projects = kf.Collections.projects || new kf.Collections.Projects(); 
     kf.Collections.currencies = kf.Collections.currencies || new kf.Collections.Currencies(); 
     //do a fetch() for the 3 above 
     kf.Collections.customers = kf.Collections.customers || new kf.Collections.Customers(); 
     var quote = kf.Collections.quotes.where({Id: parseInt(id, 10)}); 
     kf.Utils.ViewManager.swap('sectionPrimary', new kf.Views.section({ 
      section: 'quotesEdit', 
      model: quote[0] 
     })); 
    } 

Answer 1

trovo una combinazione di jQuery deferreds e il metodo di sottolineatura invoke risolve questo elegante:

//call fetch on the three collections, and keep their promises 
var complete = _.invoke([quotes, projects, currencies], 'fetch'); 

//when all of them are complete... 
$.when.apply($, complete).done(function() { 
    //all ready and good to go... 
}); 

Answer 2

promesse! In particolare jQuery.when

Si può fare qualcosa di simile:

$.when(
    kf.Collections.quotes.fetch(), 
    kf.Collections.projects.fetch(), 
    kf.Collections.currencies.fetch() 
).then(function(){ 
    // render your view. 
}); 

jQuery.ajax (e per estensione dorsale fetch) restituisce una promessa ed è possibile utilizzare $.when per impostare una funzione di callback, una volta di più le promesse sono risolti.

Answer 3

Backbone fetch restituisce un oggetto jQuery Deferred (una promessa). Così si può utilizzare when function di jQuery per attendere che tutte le promesse di risolvere:

quotesEdit: function(id) { 
    kf.Collections.quotes = kf.Collections.quotes || new kf.Collections.Quotes(); 
    kf.Collections.projects = kf.Collections.projects || new kf.Collections.Projects(); 
    kf.Collections.currencies = kf.Collections.currencies || new kf.Collections.Currencies(); 

    //do a fetch() for the 3 above 
    var quotePromise = kf.Collections.quotes.fetch(); 
    var projectsPromise = kf.Collections.projects.fetch(); 
    var currenciesPromise = kf.collections.currencies.fetch(); 

    // wait for them to all return 
    $.when(quotePromise, projectsPromise, currenciesPromise).then(function(){ 

    // do stuff here, now that all three have resolved/returned 

    kf.Collections.customers = kf.Collections.customers || new kf.Collections.Customers(); 
    var quote = kf.Collections.quotes.where({Id: parseInt(id, 10)}); 
    kf.Utils.ViewManager.swap('sectionPrimary', new kf.Views.section({ 
     section: 'quotesEdit', 
     model: quote[0] 
    })); 

    }; 

} 

Ho scritto un po 'di promesse e jQuery, quando, qui:

http://lostechies.com/derickbailey/2012/03/27/providing-synchronous-asynchronous-flexibility-with-jquery-when/

http://lostechies.com/derickbailey/2012/07/19/want-to-build-win8winjs-apps-you-need-to-understand-promises/

quel secondo link è ancora valido, nonostante il soggetto principale sia Win8 JS