document.ready не запущен с помощью pjax - PullRequest
Новая
       6

document.ready не запущен с помощью pjax

7 голосов
/ 12 ноября 2011

Я пробую pjax для приложения, которое я разрабатываю, но я вроде как врезался в стену.

Может быть, я поступаю неправильно, позвольте мне объяснить.

В приложении у меня есть главное меню сверху, с различными разделами. Каждая из ссылок в этом меню включает pjax, что означает, что изменится только тело приложения.

Обычно, когда вы щелкаете по ссылке без pjax, срабатывает метод document.ready. Я использую это для привязки событий к кнопкам, как в следующем примере.

вот мой файл users.js.coffee 

loaded = false;
$ ->
  $("#btn_new_user").bind "click", (event) ->
    if not loaded
      @path = $('#btn_new_user').attr("path")
      $("#new-users-container").load(@path)
      loaded = true
    $("#new-users-container").slideToggle()

Как вы можете видеть в этом примере, когда страница «пользователи» заканчивает загрузку, она свяжет кнопку с событием, которое загрузит форму в div и оживит ее, чтобы показать.

Однако, когда я запускаю другой раздел администратора и нажимаю ссылку «Пользователи», чтобы показать эту кнопку, событие не привязывается. Когда я перезагружаю страницу в разделе «Пользователи», document.ready срабатывает, и кнопка работает нормально.

Есть ли лучший способ привязать события к кнопкам или есть какой-то способ вызвать документ. Уже на pjax?

Спасибо.

Ответы [ 3 ]

2 голосов
/ 28 марта 2012

Вот как я сейчас это делаю.

  1. Используйте привязку делегата, как указано здесь для событий.

  2. Для другой инициализации, реализуйте это следующим образом (в необработанном Javascript) 

    window.pjax_load = function() {
  $('#foo').do_whatever();
  ...
}

$(document).ready(function() {
  // setup events etc

  window.pjax_load();
  $('a').pjax( "#container" );
  $('#container').on('pjax:end', function() { window.pjax_load(); });
});
0 голосов
/ 25 июня 2013

Это будет отлично работать:
Все, что вам нужно сделать, это включить ваш скрипт после завершения запроса pjax. 

Include Pjaxstandalone.js here then 

<script type='text/javascript'>
    pjax.connect({
        'container': 'content',
        'beforeSend': function(){console.log("before send");},
        'complete': function(){
            console.log("done!");
           // Your custom script here
         }
    });
</script>

Надеюсь, это поможет .. !!

0 голосов
/ 15 ноября 2011

Хорошо, узнал пару вещей вчера.

Во-первых, объявление coffeescript таким образом сделает код доступным только для этого файла и недоступен где-либо еще.

Обычный способ обойти это, например, 

Users =
   aMethod: -> 
      // some code


window.Users = Users

тогда в другом месте можно сделать 

window.aMethod

в любом случае, это была только часть проблемы, реальное решение было использовать метод делегата http://api.jquery.com/delegate/, который позволяет связывать элементы без их присутствия.

...