Onsen UI PostPush 事件回调多次触发答案

【问题标题】：Onsen UI PostPush event callback fires multiple timesOnsen UI PostPush 事件回调多次触发
【发布时间】：2016-07-05 11:31:18
【问题描述】：

我正在开发一个基于 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。

我只想触发相关的 ajax。但是这两个事件都被解雇了。如果我继续浏览页面，最终会触发太多请求。

谁能帮我解决这个问题？

【问题讨论】：

可能最快的解决方法是在 post 事件中设置一个布尔变量并检查 post 事件是否存在，然后不要运行其他代码。

标签： javascript jquery angularjs ionic-framework onsen-ui

【解决方案1】：

您所解释的实际上是预期的行为。 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，不是模板。

【讨论】：