Nơi đặt javascript khởi tạo trang khi sử dụng pjax?

Question

Hầu hết các lần, tôi đặt một số mã javascript trong $(document).ready để làm một số chất liệu khởi tạo trên trang web, giống như ràng buộc sự kiện vv

Nhưng bây giờ tôi muốn sử dụng pjaxhttps://github.com/defunkt/jquery-pjax cho một số các trang của tôi.

Với pjax, vì chỉ một phần của trang được làm mới, $(document).ready sẽ không được gọi lại.

Tôi có thể kích hoạt tập lệnh khởi tạo theo cách thủ công trên sự kiện pjax:end, nhưng tôi cũng muốn biết nếu có giải pháp tốt hơn cho điều đó.

Cảm ơn.

Answer 1

Tôi nghĩ rằng đặt cược tốt nhất của bạn có lẽ chỉ là để làm những gì bạn nói và móc mã init cụ thể của trang của bạn lên đến sự kiện "pjax: end". Bằng cách đó, về cơ bản nó sẽ thực hiện công việc giống như trước đây và chạy với bất kỳ html nào đã được nạp vào DOM.

Answer 2

Bạn có thể dễ dàng liên kết tất cả các mã hiện tại của bạn để cả hai document.ready và pjax: thành công các sự kiện, như vậy:

Trước:

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

Sau:

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

Answer 3

tôi đã đưa ra giải pháp gọn gàng này. Trước tiên, bạn bắt đầu bằng cách tạo ra một không gian tên cho chất kết dính của bạn trong phạm vi toàn cầu:

// Binder for PJAX init functions 

$.fn.bindPJAX = {}; // Create namespace 

function bindPJAX(functionName) { 
    // Check function existence, then call it 
    return $().bindPJAX[functionName] && $().bindPJAX[functionName](); 
} 

Sau đó ràng buộc một callback để PJAX nhấp chuột:

$(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)}); 

    }) 
    } 
}); 

Khi điều này được thiết lập, bạn có thể tiến hành mở rộng $.fn.bindPJAX để thêm các hàm phù hợp với tên tuyến đường của bạn. Ví dụ, điều này, trong phạm vi toàn cầu, sẽ được gọi khi truy cập vào http://www.yourdomain.com/admin qua PJAX:

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

Bạn cũng nên xem xét một dự phòng DRY khả thi khi PJAX thất bại hoặc không được hỗ trợ, như tung ra hàm init đúng trên tải trang đầu tiên bằng cách kiểm tra window.location bằng javascript hoặc có thể mã hóa nó trong lượt xem của ứng dụng của bạn.