我怎样才能延迟可折叠对象的扩展，直到获取其内容

How I can I delay the expansion of a collapsible until its content is fetched?

本文关键字：获取 扩展 延迟 对象 可折叠      更新时间：2023-09-26

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

  1. 它开始崩溃。
  2. 单击时，它开始从服务器获取可折叠的列表项。可折叠对象保持关闭状态，加载图标可能正在旋转。
  3. 加载所有元素并刷新并准备好列表视图后，可折叠对象将展开。
  4. 如果再次单击它，它将直接关闭，没有延迟，并从 1 开始。

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

问题是这适用于第一轮，但之后无论如何都可以打开可折叠的。考虑这个例子（也在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：

var stop = function(event) {
  alert('Locked!');
  event.preventDefault();
}
// executed after the element is created ...
$('#c').on('expand', stop)

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

谁能启发我我做错了什么？解锁似乎有我看不到的副作用。这里有几个类似的问题，但大多数人都很高兴只是阻止扩展而不再次打开它。

所以我的问题是：可靠地延迟可折叠物膨胀的最佳方法是什么？

编辑：我添加了另一个集成列表视图逻辑的示例，并显示此错误。 jsFiddle在这里。我还搬到了.one()，以使注销更具可追溯性。

新的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);

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

我不明白.preventDefault()似乎有问题...

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

在这种情况下，event.preventDefault()不会阻止事件冒泡并阻止它们执行。因此，单击标头后，您需要使用 event.stopImmediatePropagation() 停止expand事件。

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

$(".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
});

演示

我对 JQM 不是很熟悉，但我的第一个想法是在发送更多数据之前清空列表......这似乎阻止了它的扩张。

var stop = function(event) {    
    $(this).find('.ui-listview').empty()
    event.preventDefault();
    /* do ajax and then refresh component with expand enabled */
}
$('#c').on('expand', stop);

演示 - 没有 ajax

在事件系统中徘徊后，我现在得出结论，如果你设置preventDefault()一次，你就会永远坚持下去。基于 charlietfl 的解决方案，我添加了代码以使视觉影响最小，也许还有一种方法可以防止 GUI 刷新 20 毫秒以使其完全不明显。

var stop_n_load = function (event) {
  $('#lv').empty();
  $('#lv').listview('refresh');
  setTimeout(function() {
    $('#c').trigger('collapse');
  }, 20);
  // Do some work that takes time and trigger expand afterwards ...
  setTimeout(function () {
    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');
    $('#c').trigger('expand');
    $('#c').one('collapse', reset);
  }, 2000);
};

不过，我仍在寻找将事件重置为先前状态的解决方案。

相关文章：