Question

我试图在我的Laravel 5.2应用程序中使用Turbolinks，有一些js错误，考虑到一些页面需要额外的JS。我无法弄清楚如何加载页面特定的JS首先加载什么（在head部分或内容部分之后???）

这是我目前的主要布局：

<!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 load事件，而不是使用$(document).ready事件：

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

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

Turbolinks JS结构

2 个答案: