javascript - Laravel pjax - 设置

Question

我第一次使用 pjax 和 laravel 来加快页面加载速度，所以我对此了解不多。我正在使用 this包裹。我已经设置好它并且它似乎可以正常工作，但仅对于某些页面，其中我有一些内容的 javascript，我有一些问题。

这是我的 main.js 文件:

$(document).ready(function() {

    if ($.support.pjax) {
        $.pjax.defaults.timeout = 5000;
    }
    $(document).pjax('.link', "#pjax");

    //add class active to tab based on url
    var loc = window.location.pathname;
    switch (window.location.pathname) {
      case '/admin/statistics':
        $('#statistics').addClass('is-active bulletpoint');
        break;
      case '/admin/articles':
        $('#articles').addClass('is-active bulletpoint');
        $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input id="search-table" type="text" class="search-input" placeholder="Søk"></li>');
        break;
      case '/admin/users':
        $('#users').addClass('is-active bulletpoint');
        $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input type="text" class="search-input" id="search-table" placeholder="Søk"></li>');
        break;
      case '/admin/articles/create':
        $('#create').addClass('is-active bulletpoint');
        break;
      }

      var table = $('#table').DataTable({
        "paging": false,
        "ordering": false,
        "info": false,
        "dom": 'lrtip',
        "language": {
          "zeroRecords": "Ingen treff funnet"
        }
      });

      $('#search-table').keyup(function(){
        table.search($(this).val()).draw();
      });

    //add input field for external media, and remove if empty
    $(document.body).on("input", ".external-media-input:last", function () {
      var inputID = (parseInt($(this).attr('id')) + 1);
      $(".input_fields_wrap").append('<div><input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/></div>');
    }).on('blur', ".external-media-input:not(:last)", function () {
        if(!$(this).val()) $(this).remove();
    });

    //autocomplete for challenge question
    $("#challenge_question").autocomplete({
        source: "http://myApp.app/admin/challenges/autocomplete",
        minLength: 2,
        select: function( event, ui ) {
            $('#challenge_question').val(ui.item.id);
        }
    });

    //slider
    var orbit = new Foundation.Orbit($('#slider'));

    //donut charts
    for(var key in myApp.categoryViewsPercentage) {
      $('[id="' + key + '"]').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false,
            backgroundColor: '#2A2E34'
        },
        credits: {
          enabled: false
        },
        exporting: {
              enabled: false
          },
        title: {
            text: '<style="font-size:14px; color:#FFFFFF">'+ myApp.categoryViewsPercentage[key] + '%</style>' +'<br><style="font-size:8px; color:#FFFFFF"">'+ key +'</style>',
            align: 'center',
            verticalAlign: 'middle',
            y: 0
        },
        plotOptions: {
            pie: {
                borderWidth: 0,
                dataLabels: {
                    enabled: false
                },
                size: 95,
                startAngle: 0,
                endAngle: 360,
            }
        },
        series: [{
            type: 'pie',
            innerSize: '70%',
            data: [
                [key , myApp.categoryViewsPercentage[key]],
                {
                    y: 100 - myApp.categoryViewsPercentage[key],
                    dataLabels: {
                        enabled: false
                    }
                },
            ]
        }]
     });
   }
});

我有“pjax”容器上方内容的链接，因此它们不是pjax重新加载的一部分，设置如下:

<ul class="tabs" data-tabs>
  <li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}" class="link">Nytt inlegg</a></li>
  <li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}" class="link">Mine innlegg</a></li>
  <li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}" class="link">Statistikk</a></li>
  <li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}" class="link">Brukere</a></li>
</ul>

主 Blade :

<!DOCTYPE html>
<html lang="en">
<head>
  @section('head')
    @include('layouts.partials.head')
  @show
</head>
<body id="app-layout">
    @section('topBar')
      @include('layouts.partials.top-bar')
    @show
    <div class="expanded row">
        <div class="large-12 columns">
        <div class="large-3 columns">
          @mirror()
        </div>
        <div class="large-9 columns">
          <div>
            @if (count($errors) > 0)
              <div class="alert alert-danger">
                  <ul>
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
              </div>
            @endif
          <div class="row expanded columns header">
              @section('headerLinks')
                @include('layouts.partials.headerLinks')
              @show
          </div>
          <div class="content" id="pjax">
            @yield('content')
          </div>
        </div>
      </div>
    </div>
    @include('layouts.partials.foot')
</body>
</html>

我这样调用脚本:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
  <script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/datepicker/datepicker.js') }}"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
  <script src="{{ asset('js/charts.js') }}"></script>
  <script src="{{ asset('js/main.js') }}"></script>

我的一个问题是它没有为页面更改的链接提供 is-active 和 bulletpoint 类，也没有根据页面附加输入字段，因为页面没有重新加载，因此它没有为 window.location.pathname 获取新值。设置这样的东西的最佳方式是什么，以便从一个选项卡移动到另一个选项卡并更改类表现得顺畅。

这部分是我现在的设置，在我的 main.js 文件中:

//add class active to tab based on url
    var loc = window.location.pathname;
    switch (window.location.pathname) {
      case '/admin/statistics':
        $('#statistics').addClass('is-active bulletpoint');
        break;
      case '/admin/articles':
        $('#articles').addClass('is-active bulletpoint');
        $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input id="search-table" type="text" class="search-input" placeholder="Søk"></li>');
        break;
      case '/admin/users':
        $('#users').addClass('is-active bulletpoint');
        $('.tabs').append('<li class="tabs-title search"><i class="ion-ios-search"></i><input type="text" class="search-input" id="search-table" placeholder="Søk"></li>');
        break;
      case '/admin/articles/create':
        $('#create').addClass('is-active bulletpoint');
        break;
      }

同样在我的 articles/create 页面上，我正在使用 jFiler多次上传，即不使用 pjax 加载。在我的 admin/statistic 上，我正在加载 3 种类型的图表和来自服务器的数据，它会呈现其中两个，但不会呈现最后一个。

Answer 1

pjax 代表 pushState + AJAX，意味着它使用 History Web API .

这反过来意味着使用 jQuery 你可以像这样监听 pjax 触发的 popstate 事件:

$(window).on('popstate', function(ev){ 
    console.log('popstate!', ev);
});

然后相应地更新 css 类。