當屏幕尺寸發生變化時重新執行api調用

Question

如果在屏幕寬度發生變化時重新執行抓取，Backbone Marionette中如何執行此操作？現在，我的代碼必須重新加載才能檢查瀏覽器的寬度。

device = getDevice(); // returns desktop or mobile based on $(window).width(); 

if (device === 'desktop') { 
    // let's pull desktop data 
    this.desktop = new desktopItemModel({device: 'desktop'}); 
    this.desktopPromise = this.desktop.fetch(); 
} 

if (device === 'mobile') { 
    // let's pull mobile data 
    this.mobile = new mobileItemModel({device: 'mobile'}); 
    this.mobilePromise = this.mobile.fetch(); 
} 

this.allPromise = [desktopPromise, mobilePromise]; 

if (device === 'desktop') { 
    $.when(this.desktopPromise).done(_.bind(function() { 
     // do your desktop stuff 
    }, this)); 
} 
if (device === 'mobile') { 
    $.when(this.mobilePromise).done(_.bind(function() { 
     // do your mobile stuff 
    }, this)); 
} 

Answer 1

我認爲你的代碼可以從一些重組中受益。

var model; 

function getData() { 
    model = new Model(type: device) 
    model.fetch().then(doStuff) 
} 

function doStuff() { 
    if (model.type == 'desktop') { 
    // desktop stuff 
    } else { 
    // mobile stuff 
    } 
} 

window.addEventListener("resize", _.debounce(fetchData, 1000)) 
// some browsers trigger a lot of resize events, others just at the end 
fetchData()