laravel 在laravel中加载子视图时加载js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19036771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
load js when loading a subview in laravel
提问by arrowill12
Is there a way to load js into the <head>section of the page whena subview is loaded. I would like to only load specific JS files based on the view that is being called. I am using the blade template engine.
有没有办法在加载<head>子视图时将js 加载到页面的部分中。我只想根据正在调用的视图加载特定的 JS 文件。我正在使用刀片模板引擎。
回答by Gareth Daine
There is a much easier way to do this using sections and template inheritance.
使用节和模板继承有一种更简单的方法来做到这一点。
- Firstly, create a master layout file, something like this:
http://paste.laravel.com/UY9It's one I use that includes
Initializr/Bootstrap. I store this in views/layouts/frontend/ as
master.blade.php for the frontend and views/layouts/admin/ as master.blade.php for the admin and amend as necessary. - You'll notice various @section declarations ending with @show. Using @show at the end instead of @stop, allows you to override them in your other views, you'll notice I've added a @section('scripts') declaration. So, you can create a view like so:
- 首先，创建一个主布局文件，如下所示：
http://paste.laravel.com/UY9这是我使用的包含 Initializr/Bootstrap 的文件。我将其存储在 views/layouts/frontend/ 作为前端的
master.blade.php 和 views/layouts/admin/ 作为管理员的 master.blade.php 并根据需要进行修改。 - 您会注意到各种以@show 结尾的@section 声明。最后使用@show 而不是@stop，允许您在其他视图中覆盖它们，您会注意到我添加了@section('scripts') 声明。所以，你可以像这样创建一个视图：
@extends('layouts.frontend.master')
@section('scripts')
Your Scripts
@stop
@section('content')
Your content
@stop
It's that simple. This is very powerful stuff, as it gives you the ability to set a default but also override it if necessary, keeping your views very clean and minimal.
就这么简单。这是非常强大的东西，因为它使您能够设置默认值，但也可以在必要时覆盖它，从而使您的视图非常干净和最小。
A better way to do this though would be to do:
更好的方法是这样做：
@extends('layouts.frontend.master')
@section('head')
@parent
Your Scripts
@stop
@section('content')
Your content
@stop
Then you can remove the @section('scripts') declaration from your master layout. Using the @parent helper will allow you to append content to a section, thus keeping it's default while adding the extra content you have specified in your view.
然后您可以从主布局中删除 @section('scripts') 声明。使用@parent 助手将允许您将内容附加到一个部分，从而在添加您在视图中指定的额外内容时保持默认。
You can also provide default content for @yield declarations, like so @yield('content', 'Default content').
您还可以为@yield 声明提供默认内容，例如@yield('content', 'Default content')。
Check out http://codebright.daylerees.com/blade
回答by devo
First make a common header layout.
首先制作一个通用的标题布局。
app/views/layouts/header.blade.php - header layout
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') }}
Then page specific script layout.
然后页面特定的脚本布局。
app/views/layouts/script-about.blade.php - about-page script layout
app/views/layouts/script-about.blade.php - about-page script layout
{{ HTML::script('js/about.js') }}
Then view for specific page.
然后查看特定页面。
app/views/about.blade.php - about page
app/views/about.blade.php - about page
@extends('layouts.master')
@section('content')
<p>About-Us page content goes here</p>
@stop
Then common footer.
然后普通页脚。
app/views/layouts/footer.blade.php - footer layout
app/views/layouts/footer.blade.php - footer layout
</body>
</html>
Then the main layout to render.
然后主要布局要渲染。
app/views/layouts/master.blade.php - main layout
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')
And from the route, you can pass the $pagevariable. You may like this route,
从路由中，您可以传递$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));
});
回答by gandalf
In laravel 5.4 as stated in the document
在文档中所述的laravel 5.4中
You can simply use stacks(@stack and @push) to be able to load CSS and JS from subviews(child views).
您可以简单地使用堆栈（@stack 和 @push）来从子视图（子视图）加载 CSS 和 JS。
- Add
@stackto your layout where you want JS files or CSS files to be added from child views to layout.
- 添加
@stack到您希望将 JS 文件或 CSS 文件从子视图添加到布局的布局。
Here I will define two stacks in the layout file one for CSS files and one for JS files. I give the first and the second stacks arbitrary name for instance stylesand scripts
这里我将在布局文件中定义两个堆栈，一个用于 CSS 文件，另一个用于 JS 文件。例如，我给第一个和第二个堆栈任意名称styles和scripts
we want our CSS files to be loaded in the part of layout file
我们希望我们的 CSS 文件被加载到布局文件的一部分
<head>
@stack('styles')
</head>
and let's say we want our scripts to be added right be for the closing body tag in layout file
假设我们希望我们的脚本被添加到布局文件中的结束正文标签
@stack('scripts')
</body>
- now in the child view i can easily add CSS and JS files like this
- 现在在子视图中，我可以轻松添加这样的 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
@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
