Laravel,将JavaScript导入Blade模板的正确方法 [英] Laravel, right way to import javascript into Blade Templates
问题描述
我正在使用Laravel 5.6.此页面不适用于我.
pizza/index.blade.php看起来像这样:
@extends('layouts.app')@section('内容')<!-样式->< link href ="{{asset('css/pizza.css')}}" rel ="stylesheet"><!-脚本->< script src ="{{asset('js/components/pizza.js')}}"></script>< div class ="container">< div class ="row justify-content-center">< div class ="card">< div class ="card-header"> Pizza</div>< div class ="card-body">< form action ="/pizzas" method ="post">@if($ errors-> any())< div class ="alert alert-danger" role ="alert">请修正以下错误</div>@万一@include('pizza.table')</form></div></div></div></div>@endsection
pizza/table.blade.php:
< div class ="pizza-selection">< b>感谢上帝披萨节!选择当天的披萨!</b>< table id ="pizzas" class ="md-box">< tr>...</tr>@foreach($ pizzas as $ pizza)...@endforeach< tr>...< input type ="button" class ="md-box btn btn-default"id ="add_new_pizza" onClick ="addPizza()" value =添加比萨!"></td></tr></table>...
当我单击"add_new_pizza"按钮时,出现参考错误,onClick ="addPizza()",未定义addPizza().但是,我尝试将index.blade.php
中的pizza.js导入 < script src ="{{asset('js/components/pizza.js')}}"></script>
打印出资产('js/components/pizza.js')返回 http://localhost:8080/js/components/pizza.js 这对我来说很合适.
public/js/components/pizza.js如下所示:
从'../services/PizzaService.js'导入PizzaService;异步函数addPizza(){//一些功能}
当我在.blade.php的脚本中具有函数addPizza()时,它也起作用.
此外,如果需要任何其他代码审查,请在GitHub上找到存储库: https://github.com/andrelandgraf/laravel-docker
当我在< script>< script>
中复制pizza.js时,它可以正常工作,但是我收到一个SyntaxError: import声明可能只出现在一个模块
.当我通过src导入脚本时,此SyntaxError消失了,就像您在我的代码示例中看到的那样.对我来说,这表明该脚本根本没有加载.
EDIT2&解决方案:我使用了@kerbholz解决方案.我在 app.blade.php
中的 body
底部和 @section中添加了
@stack('scripts')
我知道 pizza.js
文件的 @push('stack')
.
我现在又走了一步,但我仍然收到EDIT中所述的SyntaxError.是否有解决方法?还是我只需要删除 PizzaService.js
的导入并为此文件添加< scipt> -Tag
?>
好的,此问题无关.看来浏览器尚不支持ES6模块.
@section
块之外的任何内容都不会呈现.
您可以编辑 layouts/app.blade.php
并在要显示样式/javascript的位置添加 @stack('head')
(最好在HTML的< head>
部分.
在任何 @extends('layouts.app')
的刀片文件中,您都可以使用
@push('head')<!-样式->< link href ="{{asset('css/pizza.css')}}" rel ="stylesheet"><!-脚本->< script src ="{{asset('js/components/pizza.js')}}"></script>@endpush
将内容推送到该堆栈中.
有关更多信息,请访问 https://laravel.com/docs/5.6/blade#stacks
I am using Laravel 5.6. This page did not work for me.
pizza/index.blade.php looks like this:
@extends('layouts.app')
@section('content')
<!-- Styles -->
<link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/components/pizza.js')}}"></script>
<div class="container">
<div class="row justify-content-center">
<div class="card">
<div class="card-header">Pizza</div>
<div class="card-body">
<form action="/pizzas" method="post">
@if ($errors->any())
<div class="alert alert-danger" role="alert">
Please fix the following errors
</div>
@endif
@include('pizza.table')
</form>
</div>
</div>
</div>
</div>
@endsection
pizza/table.blade.php:
<div class="pizza-selection">
<b>Thanks god its pizza day! Select your pizza of the day!</b>
<table id="pizzas" class="md-box">
<tr>
...
</tr>
@foreach ($pizzas as $pizza)
...
@endforeach
<tr>
...
<input type="button" class="md-box btn btn-default"
id="add_new_pizza" onClick="addPizza()" value="Add Pizza!">
</td>
</tr>
</table>
...
I get a reference error when I click on the "add_new_pizza" button, onClick="addPizza()", addPizza() is not defined. However, I try to import pizza.js in index.blade.php
<script src="{{ asset('js/components/pizza.js')}}"></script>
printing out asset('js/components/pizza.js') returns http://localhost:8080/js/components/pizza.js which looks right to me.
public/js/components/pizza.js looks like follows:
import PizzaService from '../services/PizzaService.js';
async function addPizza(){
// some functionality
}
It also worked when I had the function addPizza() inside the script at .blade.php.
Also, find the repository on GitHub if you need any further code reviews: https://github.com/andrelandgraf/laravel-docker
EDIT: When I copy the pizza.js inside <script><script>
it works fine, but I receive a SyntaxError: import declarations may only appear at top level of a module
. This SyntaxError dissapears when I import the script via src like you can see in my code examples. For me, this indicates that the script is not loaded at all.
EDIT2 & Solution: I used @kerbholz solution. I added @stack('scripts')
to the bottom of the body
in app.blade.php
and inside @section('content')
of index.blade.php
I know @push('stack')
the pizza.js
file.
I am now one step further but I still receive the SyntaxError stated in EDIT. Is there a workaround for that or do I just have to remove the import of PizzaService.js
and add a <scipt>-Tag
for this file as well?
EDIT3: Okay this issue is not related. It looks like ES6 modules are not yet supported by browsers.
Anything outside of your @section
block will not be rendered.
You could edit your layouts/app.blade.php
and add a @stack('head')
where you want your styles/javascript to appear (preferably in the <head>
section of your HTML).
In any blade file that @extends('layouts.app')
you can then use
@push('head')
<!-- Styles -->
<link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/components/pizza.js')}}"></script>
@endpush
to push content into that stack.
For more information visit https://laravel.com/docs/5.6/blade#stacks
这篇关于Laravel,将JavaScript导入Blade模板的正确方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!