使用 pjax 时将页面初始化 javascript 放在哪里？答案

【问题标题】：Where to put the page-initialize javascript when using pjax?使用 pjax 时将页面初始化 javascript 放在哪里？
【发布时间】：2012-03-30 13:36:55
【问题描述】：

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

但现在我想在我的一些页面上使用pjax https://github.com/defunkt/jquery-pjax。

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

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

谢谢。

【问题讨论】：

标签： javascript pjax

【解决方案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
});

【讨论】：

每个页面的初始化代码不一样怎么办？
太棒了！非常感谢。
@Adrian Macneil - 如果每个页面的初始化代码不同怎么办？
@Vonfry 我使用位置页面window.location.pathname

【解决方案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 函数，或者在应用程序的视图中对其进行硬编码。

【讨论】：

【解决方案3】：

我认为您最好的选择可能就是照您说的做，并将您的页面特定初始化代码挂接到“pjax:end”事件。这样一来，它本质上将执行与之前相同的工作，并针对已加载到 DOM 中的任何 html 运行。

【讨论】：