Turbolinks JS 结构答案

【问题标题】：Turbolinks JS structureTurbolinks JS 结构
【发布时间】：2016-08-11 20:20:23
【问题描述】：

我正在尝试将 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

【问题讨论】：

您收到的错误是什么？
我正在使用的 CSS 框架（语义 UI）提供的 javascript 组件未定义
好的，我已经添加了答案，希望对您有所帮助。

标签： laravel-5 turbolinks

【解决方案1】：

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

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

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

【讨论】：

应该没那么复杂，我只是想从某些视图加载一些额外的JS

【解决方案2】：

我确实建议并建议在页面底部调用 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 之前加载语义。

【讨论】：

仍然收到类似Uncaught TypeError: $(...).tab is not a function的错误
我们无法在此处调试您的整个代码。如果答案解决了您的第一个问题，请将其标记为已接受并提出一个新问题。
好的！很抱歉，希望有 Turbolinks 经验的其他人能提供帮助。