2012-03-14 5 views
17

시대의 대부분, I 등, 바인딩 이벤트 같은 페이지에pjax를 사용할 때 페이지 초기화 자바 스크립트를 넣을 위치는 어디입니까?

을 일부 초기화 식료품을 할 $(document).ready 일부 자바 스크립트 코드를 삽입하지만 지금은 내 페이지의 일부 pjaxhttps://github.com/defunkt/jquery-pjax을 사용하고 싶습니다.

pjax를 사용하면 페이지의 일부만 새로 고침되므로 $(document).ready이 다시 호출되지 않습니다.

pjax:end 이벤트에서 수동으로 초기화 스크립트를 트리거 할 수 있지만 더 나은 해결책이 있는지 알고 싶습니다.

감사합니다.

답변

0

나는 최선의 방법은 아마 당신이 말한 것을하고, 페이지 초기화 코드를 "pjax : end"이벤트에 연결하는 것이다. 그렇게하면 기본적으로 이전과 동일한 작업을 수행하고 DOM에로드 된 HTML에 관계없이 실행됩니다.

55

당신은 쉽게 document.ready 및 pjax 모두 기존의 모든 코드를 연결할 수 있습니다과 같이, 성공 이벤트 :

하기 전에 :

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

후 :

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

감사합니다. – neersighted

+1

Loool. 그것을 좋아하십시오 :) – Zeck

+6

초기화 코드가 각 페이지마다 다른 경우 어떻게해야합니까? – shreyj

4

I 이 깔끔한 해결책을 찾았습니다. 먼저 전역에서 바인더를위한 공간을 만들어 시작합니다

// 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가 실패하거나에서 올바른 init 함수를 실행처럼, 지원되지 않는 경우도 가능한 DRY 대체를 고려해야한다

첫 번째 페이지로드는 자바 스크립트에서 window.location을 확인하거나 애플리케이션의보기에서 하드 코드 할 수 있습니다.

+0

는 꽤 좋아 보인다, 나는 그것을 시험해 볼 것이다. – larryzhao

관련 문제