Onsen UI CallPack события повторного вызова срабатывает несколько раз

Question

Я работаю над приложением OnsenUI. Имеет несколько страниц.

Я использую событие 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.

Я хочу, чтобы был уволен только соответствующий аякс. Но оба события увольняются. И если я продолжаю просматривать страницы, в итоге слишком много запросов начинают увольняться.

Может ли кто-нибудь помочь мне в этом отношении?

Answer 1

То, что вы объясняете, на самом деле является ожидаемым поведением. Метод on добавляет слушатель, который должен выполняться всякий раз, когда событие запускается. Кажется, вы добавляете больше слушателей, не удаляя их.

Альтернативы:

1. простой альтернативой может быть once метод, который будет выполняться только один раз, а затем он будет автоматически удалять слушателя.

2. Вместо добавления слушателей вы можете просто очереди Аякса как обратный вызов к pushPage - либо из них:

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

   должно быть хорошо.

3. Вы можете добавить один слушатель, который делает разные вещи в зависимости от вашей страницы:

   $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 элементов, не шаблоны.