Laravel pjax - 成立

Question

我第一次使用带有laravel的pjax来加快页面加载速度,所以我对它没有多少了解.我正在使用这个包.我已经设置它似乎工作,只有一些页面,我有一些内容的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" container,所以它们不是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>

主刀片:

<!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 类。