バックボーン - ビューをレンダリングする前に複数のfetch（）を実行する

Question

私はここで最良のパターン/アプローチについて疑問を抱いていました。これは私のルーターの関数なので、ユーザーは 'quotes /：id'を押しますが、そのビューをレンダリングするにはプロジェクト、顧客、通貨のリストが必要です。 quotesEditビューをインスタンス化しようとする前に3つのフェッチ（）がすべて発生したことを確認する最良の方法は何ですか？ユーザーが何かをクリックしたときにすべての情報を取得するのは悪い習慣と考えられますか？

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

私は、アンダースコアのinvoke方法は、このエレガントな解決jQuery deferredsとの組み合わせを見つける：

//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

約束を！

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

jQuery.ajax（およびフェッチ延長バックボーンで）約束を返し、一度複数の約束が解決されるコールバック関数を設定するために$.whenを使用することができます。具体的にjQuery.when

あなたはこのような何かを行うことができます。

Answer 3

バックボーンのfetchは、jQuery Deferredオブジェクト（約束）を返します。だから、解決するための約束のすべてを待つためにjQueryのwhen functionを使用することができます。

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

    }; 

} 

私は約束してjQueryのとき、ここについて少し書いた：

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/

主題がWin8であるにもかかわらず、2番目のリンクがまだ有効であることを確認してください。