javascript - Onsen UI PostPush 事件回调触发多次

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 方法添加了一个监听器，只要事件被触发就会执行。你似乎在添加更多的听众而不是删除它们。

备选方案:

1. 一个简单的替代方法是 once 方法，它只会执行一次，然后会自动删除监听器。

2. 您可以将 ajax 作为对 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 元素的 ID，不是 模板。