MasterPage 上的 jQuery Mobile 转换和 AJAX 轮询

Question

我正在尝试使用带有 jQ​​uery 的 AJAX 轮询来更新 ASP.NET MVC3 中剃刀 MasterPage 上的 span 元素。该页面使用 jQuery Mobile 1.0 框架，该框架使用某种“过渡”动画来装饰简单的视图更改（例如从 /home 导航到 /about）。

这是执行轮询的 Javascript 代码，而“unreadBubble”跨度位于正文中 - 两者都在 MasterPage 中定义！

<script type="text/javascript">
$(document).bind("pageinit", function poll() {
    setTimeout(function () {
        $.ajax({ url: "/Notification/GetUnreadNotificationsCount", 
                    dataType: "json",
                    success: function (data) {
                    $('#unreadBubble').text(data.UnreadCount);
                    poll();
                } 
            });
    }, 1000);
});

所以，假设我有一个 HomeController 和一个 NotificationController，它们都使用 MasterPage 并提供一个 Index 视图。 AJAX 轮询适用于两个视图，并按预期每秒更新跨度。但是，一旦我从一个视图导航到另一个视图，跨度就会使用 MasterPage（空）中的默认值重新初始化，并且不再更新。有趣的是，仍然在 NotificationsController 上反复调用异步 GetUnreadNotificationsCount 方法 - 跨度只是不更新​​。我也尝试过提醒 JS 中的 span 标签，它不是 null 什么的。

根据documentation，jQuery Mobile 还使用 AJAX 加载新页面以插入这个花哨的“SWOOSH”过渡动画。这似乎以某种方式扰乱了 JS/DOM 初始化。

您知道如何解决这个问题吗？我应该绑定到另一个事件还是可以强制更新 span 标签？

解决方案：这是一个缓存问题！以下是诀窍： 将 class="command-no-cache" 添加到您的页面 div 将以下 JavaScript 添加到 MasterPage：

$(":jqmData(role=page)").live('pagehide', function (event, ui) {
if ($(this).children("div[data-role*='content']").is(".command-no-cache"))
    $(this).remove();

});

Answer 1

我会使用 pagebeforeshow 来实际绑定事件，并使用 pagehide 来移除事件。

您是否尝试过这样做，而不是在 pageinit 事件中只初始化一次？

更新：例如一些代码，

 <script type="text/javascript">
 var timer = null;
 $(":jqmData(role=page)").bind("pagebeforeshow", function() {
     timer = setTimeout(function() {
               $.ajax({ url: "/Notification/GetUnreadNotificationsCount", 
                  dataType: "json",
                  success: function (data) {
                     $('#unreadBubble').text(data.UnreadCount);
                  } 
               });
             }, 1000);
 }); 
 $(":jqmData(role=page)").bind("pagehide", function() {
     if (timer != null){
          clearTimeout(timer);
          timer = null;
     }
 });
</script>

在此过程中还纠正了一些其他“错误类型”，请查看并与您的代码进行比较！

希望对你有帮助