如何在旧视图上显示微调器而不是主干中的空白页面

Posted 2023-05-09

【中文标题】如何在旧视图上显示微调器而不是主干中的空白页面

【英文标题】：How to show the spinner on the oldview instead of a blank page in backbone

【发布时间】：2013-11-24 13:58:27

【问题描述】：

在我的应用程序中，我在转换期间得到一个中间空白页。并且 ajax 微调器显示在该页面中。

这就是我在 main.js 中包含微调器的方式

$(document).ajaxSend(function() 
    $.mobile.loading( 'show');
);
$(document).ajaxComplete(function() 
    $.mobile.loading( 'hide');
);

在路由器中，我删除旧视图并加载新视图以摆脱僵尸视图问题，通过 oldview.remove() 和 oldview.unbind()。

我的问题是如何在旧视图上方显示 ajax 微调器，而不是在空白页面上显示它。

感谢任何帮助。

【问题讨论】：

这与 `RequireJS 有什么关系？这个问题根本没有说清楚。

只是我的应用中包含了所有这些 JS 库

【参考方案1】：

更新

对不起，我有点跑题了。我假设你已经有一个 jQuery 插件，以便在任何 DOM 元素之上显示/隐藏加载覆盖。

所以要实施我的解决方案，您需要一个。

注意：据我所知，您不能在特定的 DOM 元素上应用 $.mobile.loading()。

您可以使用 jquery-loadmask 之类的东西，然后重新设置 CSS 的样式以匹配 $.mobile.loading 的样式。

或者我个人使用在 github 上找到的 simple jQuery function 来实现相同的行为（可能更轻）。

原创

你试过了吗：

oldview.$el.loading('show');

还有ajaxSend 是global Ajax event 以及更多，不与任何DOM 元素相关联，而仅与document.body 元素相关联，除了处理视图中的show/hide 之外，您别无选择：

var OldView = Backbone.View.extend(

    //...

    events: 
        "click .the-button-trigering-the-ajax-call": "onButtonClicked"
    ,

    onButtonClicked: function (e) 
        this.$el.loading('show');
    ,

    // And you could get rid of it when rendering
    render: function () 

        this.$el.loading('hide');

        //...

        return this;
    
);

只有一种解决方案。