0

我们已经测试了一个自定义的 ajax 导航，现在我们使用 Turbolinks 但他不支持 IE8 和 9。所以现在我们想使用兼容完整浏览器的 wiselinks。

但是我们很难在每个页面之间执行 Javascript 代码。

这里的代码：

应用程序.js

//= require jquery
//= require jquery_ujs
//= require jquery.role
//= require wiselinks
//= require_tree ../..
//= require_self

var startSpinner, stopSpinner;

startSpinner = function() {
  $('#loading-indicator').show();
};

stopSpinner = function() {
  $('#loading-indicator').fadeOut();
};

$(document).ready(function() {
  window.wiselinks = new Wiselinks($('#PageContainer'));
  $(document).off('page:loading').on('page:loading', function(event, $target, render, url) {
    console.log("Loading: " + url + " to " + $target.selector + " within '" + render + "'");
    startSpinner();
  });
  $(document).off('page:redirected').on('page:redirected', function(event, $target, render, url) {
    return console.log("Redirected to: " + url);
  });
  $(document).off('page:always').on('page:always', function(event, xhr, settings) {
    console.log("Wiselinks page loading completed");
    stopSpinner();
  });
  $(document).off('page:done').on('page:done', function(event, $target, status, url, data) {
    console.log("Wiselinks status: '" + status + "'");
  });
  $(document).off('page:fail').on('page:fail', function(event, $target, status, url, error, code) {
    console.log("Wiselinks status: '" + status + "'");
  });
});

工作.js：

$('@JRP').ready(function(){
    console.log('AVF');
    var $container = $("#component-view .list");
    $container.isotope({
        itemSelector: '.job',
        masonry: {
            gutterWidth: 0
        }
    });
    $container.toggleClass('grid').toggleClass('list').isotope( 'reLayout' ).isotope();
        // creates select dropdown

    $("#job-result-options-filter").click(function(e){

        $("#facetwrapper").slideToggle();
    });
    $("#job-result-options-filter").pageslide({ href: '#facets' });

    $('#toggle-sizes').click(function(){
        $container
                .toggleClass('grid')
                .toggleClass('list')
                .isotope('reLayout');
        return false;
    });

});

如果我对页面 Job 进行空白刷新，则执行 JS，但如果我来自加载 ajax 的链接，则不会执行 JS，并且我的错误日志中没有任何内容。

我如何调试这个？还是在渲染作业页面时找到执行JS的方法？

这里使用的宝石：https ://github.com/igor-alexandrov/wiselinks

4

1 回答 1

0

我的解决方案很简单。这个想法不是在准备好文档时调用您的自定义代码。相反，将它们全部包装到一个 jQuery 函数中，然后在 document ready 和 page:done 中调用这个函数。

// You custom code
$.fn.my_app_init = function() {
 console.log('AVF');
 //...
 $('#toggle-sizes').click(function(){
 //...
};

$(document).ready(function() {
  $(document).my_app_init(); // Call this function
  window.wiselinks = new Wiselinks($('#PageContainer'));

  $(document).off('page:always').on('page:always', function(event, xhr, settings) {
    console.log("Wiselinks page loading completed");
    stopSpinner();
    $(document).my_app_init(); // Call this again on page change.
  });     
});
于 2013-08-30T02:59:33.097 回答