Question

大多数时候，我在$(document).ready中放了一些javascript代码来在页面上做一些初始化的事情，比如事件绑定等。

但现在我想对我的部分网页使用pjax https://github.com/defunkt/jquery-pjax。

使用pjax，因为只有部分页面被刷新，$(document).ready将不再被调用。

我可以在事件pjax:end上手动触发初始化脚本，但我也想知道是否有更好的解决方案。

感谢。

Answer 1

您可以轻松地将所有现有代码链接到document.ready和pjax：success事件，如下所示：

在：

$(document).ready(function() {
    // page load stuff
});

后：

$(document).on('ready pjax:success', function() {
    // will fire on initial page load, and subsequent PJAX page loads
});

Answer 2

我想出了这个简洁的解决方案。首先，在全局范围内为绑定器创建命名空间：

// Binder for PJAX init functions

$.fn.bindPJAX = {}; // Create namespace

function bindPJAX(functionName) {
  // Check function existence, then call it
  return $().bindPJAX[functionName] && $().bindPJAX[functionName]();
}

然后将回调绑定到PJAX点击：

$(document).ready(function(){
  if ($.support.pjax) {
    $('a[data-pjax]').on('click', function(event) {

      var container = '#main';
      var emptyRoute = 'feed'; // The function that will be called on domain's root

      // Store current href without domain
      var link = event.currentTarget.href.replace(/^.*\/\/[^\/]+\//, '');
      var target = link === "" ? emptyRoute : link;

      // Bind href-specific asynchronous initialization
      $(document).on('ready pjax:success', container, function() {
        bindPJAX(target); // Call initializers
        $(document).off('ready pjax:success', container); // Unbind initialization
      });

      // PJAX-load the new content
      $.pjax.click(event, {container: $(container)});

    })
  }
});

设置此项后，您可以继续扩展$.fn.bindPJAX对象以添加与您的路由名称匹配的功能。例如，在全局范围内，当通过PJAX访问http://www.yourdomain.com/admin时将调用它：

$.extend($.fn.bindPJAX, {
  admin: function(){
    // Initialization script for /admin route
  }
});

当PJAX失败或不受支持时，您还应该考虑可行的DRY回退，例如通过在javascript中检查window.location，或者在应用程序的视图中对其进行硬编码，在第一次页面加载时启动正确的init函数。

Answer 3

我认为你最好的选择可能只是做你所说的并将你的页面特定的初始化代码挂钩到“pjax：end”事件。这样，它基本上可以完成它之前所做的相同工作，并且可以对付加载到DOM中的任何html。

使用pjax时在哪里放置页面初始化javascript？

3 个答案: