Onsen UI PostPush事件回調觸發多次

我正在使用OnsenUI驅動的應用程序。它有多個頁面。Onsen UI PostPush事件回調觸發多次

我正在使用postpush事件來激發我對數據的ajax請求。

像下面一樣。

$scope.navi.on('postpush', function() { 
//ajax code here 
});

現在的問題是，我的完整代碼如下所示。

$scope.navi.pushPage('linkone.html'); 
$scope.navi.on('postpush', function() { 
//ajax 1 
}); 

$scope.navi.pushPage('linktwo.html'); 
$scope.navi.on('postpush', function() { 
//ajax 2 
});

如果我導航到linkone.html頁面，它會觸發ajax1。之後，如果我導航到linktwo.html，它會觸發ajax1和ajax2。

我只想要相關的ajax被解僱。但是這兩件事都被解僱了。如果我繼續瀏覽頁面，最終會有太多請求開始被解僱。

有誰能幫我解決這個問題嗎？

來源

2016-07-05 Ritesh Kedar

也許最快的解決辦法是在後期事件中設置一個布爾變量，並檢查後期事件是否存在，然後不運行其他代碼。 – Munsterlander

你解釋的實際上是預期的行爲。當事件觸發時，on方法添加一個偵聽器來執行。您似乎在不刪除它們的情況下添加更多聽衆。

替代：

一個簡單的替代將是once方法將僅被執行一次，然後它會自動刪除該偵聽器。

而不是增加聽衆的你可以排隊AJAX作爲回調到pushPage - 無論是這些：

$scope.navi.pushPage('linkone.html', {callback: ajax1}); 
$scope.navi.pushPage('linkone.html').then(ajax1);

應該罰款。

您可以添加一個監聽器，不取決於你的頁面上不同的東西：

$scope.navi.pushPage('linkone.html'); 
$scope.navi.on('postpush', function(ev){ 
    if (ev.enterPage.id === 'page1') { 
    ajax1(); 
    } else if (ev.enterPage.id === 'page2') { 
    ajax2(); 
    } 
});

同樣的事情可以或許也與頁面的init事件來實現。

document.addEventListener('init', function(ev) { 
    if (ev.target.id === 'page1') { 
    ajax1(); 
    } else if (ev.target.id === 'page2') { 
    ajax2(); 
    } 
});

但是千萬注意，在這種第三種方案page1和page2必須ons-page元素的ID，不模板。

來源

2016-07-06 09:52:23

Onsen UI PostPush事件回調觸發多次

回答

相關問題