我怎样才能延迟可折叠的扩展直到其内容被提取？

问题描述

我想在我的jQM应用程序（1.3.2）中集成可折叠，其工作方式如下：

I want to integrate a collapsible in my jQM app (1.3.2) that works as follows:

1. 它开始已折叠。


2. 点击后，它开始从服务器获取可折叠的列表项。 可折叠保持关闭，加载图标可能正在旋转。


3. 加载所有元素并刷新列表视图并准备就绪后，可折叠扩展
。

4. 如果再次点击它，会立即关闭，不会延迟，从1开始。

1. It starts collapsed.
2. On click it starts to fetch listitems for the collapsible from the server. The collapsible stays closed, a load icon may be spinning.
3. After all elements are loaded and the listview refreshed and ready, the collapsible expands.
4. If you click it again, it closes directly without delay, and starts from 1.

我最初的想法是抓住 expand 事件并阻止其传播。加载完成后，我取消注册我的自定义事件处理程序，将可折叠程序恢复正常，最后从JavaScript触发expand事件以打开。

My initial idea was to grab the expand event and prevent its propagation. When loading is finished I de-register my custom event handler to turn the collapsible back to normal, and finally triggering the expand event from JavaScript to open.

问题是这适用于第一轮，但之后无论如何都会打开折叠。考虑这个例子（也在）：

The problem is that this works for the first round, but afterwards the collapsible opens anyway. Consider this example (also in jsfiddle):

<div data-role="collapsible" id="c">
  <h2>Collapse</h2>
  <ul data-role="listview" id="lv">
    <li>You don't see me!</li>
  </ul>
</div>

<a href="#" data-role="button" onClick="$('#c').off('expand', stop)">
  Unlock the collapsible
</a>

<a href="#" data-role="button" onClick="$('#c').on('expand', stop)">
  Lock the collapsible
</a>

JavaScript：

JavaScript:

var stop = function(event) {
  alert('Locked!');
  event.preventDefault();
}

// executed after the element is created ...
$('#c').on('expand', stop)

在这里，如果您在加载后单击可折叠，它将保持关闭状态（良好）。当您单击解锁时，它会打开并且不会显示任何警报（正常）。如果你再次锁定它会显示警告（好），但仍会打开（不好）。

Here, if you click the collapsible after loading, it stays closed (good). When you click unlock, it opens and no alert is shown (good). If you lock it again it shows the alert (good) but opens anyways (bad).

任何人都可以告诉我我做错了什么？似乎有解锁的副作用，我无法看到。这里有几个类似的问题，但大多数人都很高兴只是阻止扩展而不再重新开启。

Can anyone enlighten me what I am doing wrong? There seems to be side-effects from unlocking that I cannot see. There are several similar questions here, but most are happy with just preventing the expansion without turning it back on again.

所以我的问题是：什么是最好的如何可靠地推迟可折叠扩张？

编辑我添加了另一个集成listview逻辑的示例，并显示了此错误。 我也搬到了 .one（）使取消注册更具可追溯性。

I added another example that integrates the listview logic and also shows this error. jsFiddle is here. I also moved to .one() to make the de-registering more traceable.

新JavaScript：

New JavaScript:

var stop_n_load = function (event) {
  alert('stop opening! (or at least try to ...)');

  // try to stop the expanding by stopping the event
  event.preventDefault();

  // Do some work that takes time and trigger expand afterwards ...
  setTimeout(function (e) {
    dd = new Date();
    $('#lv').empty();
    $('#lv').append("<li><a href='#'>Item A ("+dd+")</a></li>");
    $('#lv').append("<li><a href='#'>Item B ("+dd+")</a></li>");
    $('#lv').listview('refresh');

    // when done, start expanding without this handler (was register only once)
    $('#c').trigger('expand');
    // for the next collapse register stop_n_load again
    $('#c').one('collapse', reset);
  }, 2000);
};

var reset = function (event) {
  $('#c').one('expand', stop_n_load);
};

$('#c').one('expand', stop_n_load);

在第一次扩展时，它按预期工作，首先更新然后打开。在第二次运行时，它无需等待即可打开，您可以稍后查看时间戳更新，以便正确调用该事件。

On the first expansion it works as expected, it first updates and then opens. On the second run it opens without waiting, you can see the timestamp updating later, so the event is called properly.

.preventDefault（）似乎有问题我不明白......

There seems to be a problem with .preventDefault() I don't understand ...

推荐答案

当展开 / collapse 事件被触发，jQM添加了几个类来显示/隐藏内容以及更新可折叠按钮/标题。

When expand/collapse events are triggered, jQM adds several classes to show/hide contents as well as update collapsible button/header.

在这种情况下， isn' t防止事件冒泡并阻止它们执行。因此，您需要使用在点击标题后停止展开事件。

In this case, event.preventDefault() isn't going to prevent event(s) from bubbling and stop them from executing. Thus you need to use event.stopImmediatePropagation() to stop expand event once header is clicked.

当折叠折叠时，它有一个类 ui-collapsible-collapsed 并且一旦展开，该类将被删除。因此，当触发 collapse 时，它会正常工作而不会中断。

When a collapsible is collapsed, it has a class ui-collapsible-collapsed and once expanded, the class is removed. Therefore, when collapse is triggered, it works normally without interruption.

$(".ui-collapsible-heading-toggle").on("click", function (e) {

    // check if collapsible is whether expanded or collapsed
    if ($(this).closest(".ui-collapsible").hasClass("ui-collapsible-collapsed")) {

        // true
        // stop "expand" event on click,tap,vclick,touchstart, etc...
        e.stopImmediatePropagation();

        // show loading msg - optional
        $.mobile.loading("show", {
            text: "Loading...Please wait",
            textVisible: true
        });

        // for demo
        // add items, expand and hide loading msg
        setTimeout(function () {
            $("#lv").empty().append(items).listview("refresh");
            $("#c").trigger("expand");
            $.mobile.loading("hide");
        }, 1000);
    }

    // false
    // collapse normally or do something else
});

这篇关于我怎样才能延迟可折叠的扩展直到其内容被提取？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！