0

我正在尝试使用pushPage()OnsenUI 2（截至目前为 rc15）的功能。除了 OnsenUI，我还在使用 jQuery 3。

这是我的功能，单击某些元素后应推送页面：

$(".tile_handler").on("click", ".imalink", function () {
    var link = $(this).data().href;
    if(link != null){
        document.querySelector("#myNavigator").pushPage(link, { animation: "slide-ios" });
    }
})

当我第一次推送页面时，它工作正常。我使用 iOS 后退按钮返回。然后我再次点击它，我得到了这个错误（随着我重复这个过程越来越多）：

[index.js:450] 未捕获（承诺）pushPage 已经在运行。

这是另一个应该加载拆分器页面的函数：

$(".splitter_item").click(function () {
    var address = $(this).data('address');
    $('#content')[0].load(address).then(menu.close.bind($('#menu')[0]));
})

当我通过 Splitter 在两个页面之间切换时，它开始抛出这个（每次我在页面之间切换时都会抛出更多）

[undefined:1] Uncaught (in promise) 分离器侧被锁定。

我假设正在发生的是我加载一个页面，离开它，当我再次访问它时，它再次加载该页面。然而，这似乎不是 OnsenUI 示例中显示的行为，例如：

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});

有一个popPage()功能应该删除以前加载的页面并防止这种情况发生。但是参考文献没有使用它，所以我认为我做错了什么。但我不知道是什么。

更新：

我设法在 CodePen 中重现了这两个问题。这是拆分器错误，这是pushPage()一个。似乎pushPage()是我的功能有问题，因为pushPage()每次单击它时它都会添加一个请求，但不知道为什么。

这两个错误似乎只发生在 Ripple 模拟器中（通过 VS2015）。我似乎无法在 Android Emulator 中重现它们（但$(".tile_handler").on("click", ".imalink", function () {无论如何代码都会多次触发错误）。我正在进一步测试这个。

4

3 回答 3

2

基本上每次推送页面时，该页面都会触发一个init事件。但是 Onsen 仍然在 dom 中保留初始页面。

导航器示例（相同的逻辑适用于拆分器之一）：

<ons-navigator>
  <ons-page id="dashboard">
    <div class="imalink" data-href="request_list.html"></div>
  </ons-page>
</ons-navigator>

您有一个仪表板的初始化事件。然后单击该图块并转到另一个页面。然后request_list触发它自己的init事件。但是我们的初始页面仍然在 dom 中。

<ons-navigator>
  <ons-page id="dashboard" style="display: none">
    <div class="imalink" data-href="request_list.html"></div>
  </ons-page>
  <ons-page id="request_list">
    ...
  </ons-page>
</ons-navigator>

你有这样的东西。但是，第二次调用以下内容：

$(".tile_handler").on("click", ".imalink", function () {
  ...
})

这再次增加了听众。$el.on("click")像 的别名addEventListener，意味着您正在添加越来越多的听众。

因此，每当您导航时，您都会不断添加它们，因为初始页面从未从 dom 中删除。

替代解决方案：

  1. 仅使用当前页面 ( e.target)

    $('selector') // instead of this   
$(e.target).find('selector')  // use this

    这样，您就只能在刚刚创建的页面中查找元素。

  2. 从一开始就启用处理程序。由于您使用的是 jQuery，因此实际上有一种更简单的方法来做这些事情而不依赖于init事件。

    只需在任何初始化处理程序之外执行此操作：

    $(document).on("click", ".tile_handler .imalink", function () { ... })

    这实际上意味着处理程序附加到文档本身，并且仅当目标是时才会调用处理程序.tile_handler .imalink- 因此它适用于您创建的任何未来 imalink。

    这可能不是最有效的方法，但绝对是最简单的方法之一。

于 2016-08-03T10:03:00.440 回答
1

例如，如果您双击按钮/链接，您提到的这两个错误实际上都是一种安全措施，可以防止您错误地推动或执行某些操作两次。

当您在动画运行时尝试执行操作时，它们会出现。正如您在示例中看到的那样，通常推送页面两次或更多次没有问题，只要您在第一次推送完成后开始第二次推送即可。

以下是您的splitter和navigator的确切代码的演示。

所以错误不是来自您提供的代码，而是来自其他地方。

我唯一能想到的是，如果由于某种原因该popPage方法未能正确完成，则会看到您提到的行为。也许如果您向我们提供您自己的代码笔，可以重现问题，我们可以进一步调试它。

另一种虽然强烈不推荐的方法是在您执行操作之前强制状态。然而，这并不能解决问题，而只是掩盖它。当然，与所有黑客一样 - 它可能会在未来的版本中中断。

myNavigator._isRunning = false;

更新：

以下是您在评论中提供的两支更新笔： https ://codepen.io/IliaSky/pen/YWOOkW?editors=1010 https://codepen.io/IliaSky/pen/QEVVGm?editors=1010

基本上，您是在init事件上添加处理程序，每当添加页面时都会触发该处理程序。因此，根据您的逻辑，您正在为每个页面添加越来越多的处理程序。只要确保只添加一次就可以了。

添加以下内容：

if (e.target.id == 'pagename') ...

或者干脆

$(document).on("init", '#dashboard_page', function(){ ... }
于 2016-08-03T04:56:54.630 回答
0

看看jQuery 中的 .one() - 事件处理程序将只对每个元素执行一次，以防止出现错误：Uncaught (in promise) pushPage is already running

$(".tile_handler").one("click", ".imalink", function () {
var link = $(this).data().href;
if(link != null){
    document.querySelector("#myNavigator").pushPage(link, { animation: "slide-ios" });
}})
于 2018-09-22T21:47:48.053 回答