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。

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

有人可以帮我解决这个问题吗？

Answer 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，不模板'。

Onsen UI PostPush事件回调多次触发

1 个答案: