Turbolinks JS 结构

Question

我正在尝试将 Turbolinks 与我的 Laravel 5.2 应用程序一起使用，考虑到某些页面需要额外的 JS，存在一些 js 错误。我不知道如何加载页面特定的 JS 首先加载什么（在标题部分或内容部分之后？？？）

这是我当前的主布局：

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
    <!-- Load CSS -->
    @include('assets.css')
    <!-------------->
    <!-- Load jQuery -->
    <script src="{{ URL::asset('js/jquery-2.1.4.min.js')}}"></script>
    <script src="{{URL::asset('js/jquery.turbolinks.min.js')}}"></script>
    <script src="{{URL::asset('js/jquery.address.js')}}"></script>
    @yield('head')
    <script src="{{ URL::asset('js/turbolinks.js')}}"></script>
    <!----------------->
</head>
<body>
<!-- Load Navbar -->
@include('elements.html.navbartop')
<!----------------->
<div class="pusher">

    <div id="content" class="ui main container" style="margin: 85px 0 50px 0">
        <!-- Load Content -->

        @yield('content')
        <!------------------>
    </div>
</div>
<!-- Load Footer -->
@include('elements.html.footer')
<!----------------->
<!---->
<script src="{{ URL::asset('js/semantic.min.js')}}"></script>
<!--------------------->
<script>
    @include('ajax.search') // searchbar ajax
</script>
</body>
</html>

现在是不同的页面：

@extends('layout.master')

@section('title', 'Dashboard')

@section('head')
<script>
    $(document).ready(function () {    

        $('element').dowhatever;
    });

</script>
@endsection

@section('content')
 ....
@endsection

Answer 1

我确实建议并建议在页面底部调用 JS 脚本，您的文件应如下所示：

<html>
<head>
    <title>@yield('title')</title>
    <!-- Load CSS -->
    @include('assets.css')
    <!-------------->
</head>
<body>
<!-- Load Navbar -->
@include('elements.html.navbartop')
<!----------------->
<div class="pusher">

    <div id="content" class="ui main container" style="margin: 85px 0 50px 0">
        <!-- Load Content -->

        @yield('content')
        <!------------------>
    </div>
</div>
<!-- Load Footer -->
@include('elements.html.footer')
<!----------------->
<!---->
    <!-- Load jQuery -->
    <script src="{{ URL::asset('js/jquery-2.1.4.min.js')}}"></script>
    <script src="{{ URL::asset('js/semantic.min.js')}}"></script>
    <script src="{{URL::asset('js/jquery.turbolinks.min.js')}}"></script>
    <script src="{{URL::asset('js/jquery.address.js')}}"></script>
    @yield('head')
    <script src="{{ URL::asset('js/turbolinks.js')}}"></script>
    <!----------------->
<!--------------------->
<script>
    @include('ajax.search') // searchbar ajax
</script>
</body>
</html>

同时在 Turbolinks 之前加载语义。

Answer 2

您应该像这样使用 turbolinks 加载事件，而不是使用 $(document).ready 事件：

document.addEventListener("turbolinks:load", function() {
    $('element').dowhatever;
});

您还需要了解 Turbolinks 5 的工作方式，因为在初始页面加载时加载和评估任何脚本，然后附加到当前 head 元素。

Turbolinks JS 结构

Turbolinks JS structure

laravel-5

turbolinks