Turbolinks JS结构

我想用我的Laravel 5.2应用程序使用Turbolinks，有一些JS错误，考虑到一些页面需要额外的JS。我无法弄清楚如何加载页面的特定的JS什么先装入Turbolinks 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

来源

2016-08-11 user3813360

您收到的错误是什么？ –

我使用的CSS框架提供的javascript组件（语义UI）没有定义 – user3813360

好吧，我已经添加了一个答案，希望这有助于。 –

而不是使用$(document).ready事件，你应该使用turbolinks负载事件是这样的：

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

而且你需要了解的方式，Turbolinks的5部作品，因为负荷和评估的初始页面加载任何脚本然后附加到当前的头元素。

来源

2016-08-12 15:04:32

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

认为我得到它的工作 – user3813360

我建议，并建议调用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之前加载语义。

来源

2016-08-12 00:46:34

仍然会收到错误，例如'Uncaught TypeError：$（...）。tab不是函数' – user3813360

我们无法在此处调试您的整个代码。如果答案解决了您的第一个问题，请将其标记为已接受并提出一个新问题。 –

不，它没有，我没有得到turbolinks如何工作 – user3813360

Turbolinks JS结构

回答

相关问题