Куда поместить javascript для инициализации страницы при использовании pjax? - PullRequest
Новая
       12

Куда поместить javascript для инициализации страницы при использовании pjax?

17 голосов
/ 14 марта 2012

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

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

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

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

Спасибо.

Ответы [ 3 ]

57 голосов
/ 16 мая 2012

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

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

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

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

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

0 голосов
/ 19 марта 2012

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

...