在 laravel 中加载子视图时加载 js答案

【问题标题】：load js when loading a subview in laravel在 laravel 中加载子视图时加载 js
【发布时间】：2013-10-02 22:12:20
【问题描述】：

有没有办法在加载子视图时将 js 加载到页面的<head> 部分。我只想根据被调用的视图加载特定的 JS 文件。我正在使用刀片模板引擎。

【问题讨论】：

【解决方案1】：

使用节和模板继承有一种更简单的方法。

首先，创建一个主布局文件，如下所示： http://paste.laravel.com/UY9 这是我使用的一个，包括初始化/引导程序。我将其存储在视图/布局/前端/ as
master.blade.php 用于前端，views/layouts/admin/ as master.blade.php 供管理员使用，并根据需要进行修改。
您会注意到各种以@show 结尾的@section 声明。使用 @show 最后而不是@stop，允许您覆盖它们你的其他观点，你会注意到我添加了一个 @section('scripts') 宣言。因此，您可以像这样创建一个视图：


@extends('layouts.frontend.master')

@section('scripts')
    Your Scripts
@stop

@section('content')
    Your content
@stop

就这么简单。这是非常强大的东西，因为它使您能够设置默认值，但也可以在必要时覆盖它，从而保持您的视图非常干净和最小。

一个更好的方法是这样做：


@extends('layouts.frontend.master')

@section('head')
    @parent
    Your Scripts
@stop

@section('content')
    Your content
@stop

然后，您可以从主布局中删除 @section('scripts') 声明。使用 @parent 帮助器将允许您将内容附加到一个部分，从而在添加您在视图中指定的额外内容时保持它的默认值。

您还可以为@yield 声明提供默认内容，例如@yield('content', 'Default content')。

查看http://codebright.daylerees.com/blade

【讨论】：

拯救了我的一天！ :)

【解决方案2】：

先做一个通用的标题布局。

app/views/layouts/header.blade.php - header layout

<!DOCTYPE html>
<html>
<head>
  <title>{{ $page->title }}</title> {{-- Getting title from $page object, which is passed from route --}}
  {{ HTML::style('css/common.css') }}
  {{ HTML::script('js/jquery.js') }}
  {{ HTML::script('js/common.js') }}

然后是页面特定的脚本布局。

app/views/layouts/script-about.blade.php - about-page script layout

{{ HTML::script('js/about.js') }}

然后查看特定页面。

app/views/about.blade.php - about page

@extends('layouts.master')
@section('content')
  <p>About-Us page content goes here</p>
@stop

然后是普通页脚。

app/views/layouts/footer.blade.php - footer layout

  </body>
</html>

然后是要渲染的主布局。

app/views/layouts/master.blade.php - main layout

@include('layouts.header')
@include('layouts.script-'.$page->slug) {{-- Getting page name from $page object  --}}
</head>
<body>
  @yield('content')
@include('layouts.footer')

并且从路由中，您可以传递$page 变量。您可能会喜欢这条路线，

Route::get('{slug}', function($slug) {

    $page = Page::where('slug', '=', $slug)->first();
        // getting the datas from Page model with pages table where slug = last uri in your address-bar

    if ( is_null($page) ) { // if no page in db, call 404
        App::abort(404);
    }
        // render the view with page details
    return View::make($page->slug)->with(array('page' => $page));
});

【讨论】：

【解决方案3】：

在 document 中所述的 laravel 5.4 中

您可以简单地使用堆栈（@stack 和 @push）来从子视图（子视图）加载 CSS 和 JS。

将 @stack 添加到您希望将 JS 文件或 CSS 文件从子视图添加到布局的布局中。

在这里，我将在布局文件中定义两个堆栈，一个用于 CSS 文件，一个用于 JS 文件。我给第一个和第二个堆栈起任意名称，例如 styles 和 scripts

我们希望我们的 CSS 文件被加载到布局文件的一部分中

<head>
@stack('styles')
</head>

假设我们希望我们的脚本被添加到结束的正文标签中在布局文件中

@stack('scripts')
</body>

现在在子视图中我可以像这样轻松添加 CSS 和 JS 文件

@push('styles')
<style rel="stylesheet" href="{{asset('dropzone/dist/min/dropzone.min.css') }}" ></style>
@endpush

@push('scripts')
<script src="{{ asset('dropzone/dist/min/dropzone.min.js') }}"></script>
@endpush

【讨论】：