Где поставить страницу-инициализировать javascript при использовании pjax?

В большинстве случаев я добавляю код javascript в $(document).ready для создания некоторых элементов инициализации на странице, таких как привязка событий и т.д.

Но теперь я хотел бы использовать pjax https://github.com/defunkt/jquery-pjax для некоторых моих страниц.

С pjax, потому что только часть страницы обновляется, $(document).ready больше не будет вызван.

Я мог бы вручную запустить инициализацию script on event pjax:end, но я также хочу знать, есть ли для этого лучшее решение.

Ответы

Ответ 1

Я думаю, что ваш лучший выбор, вероятно, просто для того, чтобы сделать то, что вы сказали, и перехватить код инициализации вашей страницы до события "pjax: end". Таким образом, он по существу будет выполнять ту же работу, что и раньше, и работать против того, что html был загружен в DOM.

Ответ 2

Вы можете легко связать весь свой существующий код с документами 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
});

Ответ 3

Я придумал это опрятное решение. Сначала вы начинаете с создания пространства имен для ваших связующих в глобальной области:

// 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 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, чтобы добавить функции, которые будут соответствовать имени вашего маршрута. Например, это, в глобальной области, будет вызываться при доступе к http://www.yourdomain.com/admin через PJAX:

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

Вы также должны рассмотреть жизнеспособный резерв DRY, когда PJAX терпит неудачу или не поддерживается, например, запуск правильной функции init на первой странице, путем проверки window.location в javascript или, возможно, жесткого кодирования в представлениях вашего приложения.