2013-02-19 54 views
16

我在想這裏最好的模式/方法。這是我的路由器中的一個功能,所以用戶點擊'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] 
     })); 
    } 

回答

40

我找到jQuery deferreds和組合下劃線的invoke方法解決了這個優雅:

//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... 
}); 
+0

那是行得通的嗎?如果是這樣的話,那就太好了! – benhowdle89 2013-02-19 17:02:04

+0

@ benhowdle89,oughta工作。 – jevakallio 2013-02-19 17:03:05

+3

默認情況下,使用'GET' http方法進行提取。我非常驚訝,我可以編寫'_.invoke([quotes,projects,currency],'fetch',{type:'POST'})' – lexeme 2013-05-24 05:51:22

19

承諾!具體jQuery.when

你可以做這樣的事情:

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

jQuery.ajax(通過擴展骨幹讀取)返回一個承諾,你可以使用$.when設置一個回調函數,一旦多個承諾得到解決。

+0

作品,我認爲這比讀者接受的答案更容易閱讀 – nickang 2017-08-28 05:51:35

4

Backbone的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 JS

+0

謝謝!每個人都很在意'承諾',但這是@ fencliff的_.invoke()的狡猾使用讓我感到震撼! – benhowdle89 2013-02-19 17:08:48

+0

不必要的額外間接層,如果你問我:) ...但我想減少調用「取」三次是有點漂亮 – 2013-02-19 17:12:39

+0

哈!爲你強​​調==巫毒魔術! – benhowdle89 2013-02-19 17:17:20