web-dev-qa-db-ja.com

Laravel、JavaScriptをブレードテンプレートにインポートする正しい方法

Laravel 5.6。 このページ を使用していません。

pizza/index.blade.phpは次のようになります。

@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>
    ...

「add_new_pizza」ボタン、onClick = "addPizza（）"をクリックすると参照エラーが発生し、addPizza（）が定義されていません。しかし、私はpizza.jsをindex.blade.phpにインポートしようとします

<script src="{{ asset('js/components/pizza.js')}}"></script>

asset（ 'js/components/pizza.js'）を出力すると http：// localhost：8080/js/components/pizza.js が返されます。

public/js/components/pizza.jsは次のようになります。

import PizzaService from '../services/PizzaService.js';

async function addPizza(){
    // some functionality
}

.blade.phpのスクリプト内に関数addPizza（）がある場合にも機能しました。

また、さらにコードレビューが必要な場合は、GitHubでリポジトリを見つけてください。 https://github.com/andrelandgraf/laravel-docker

編集：pizza.jsを<script><script>内にコピーすると正常に動作しますが、SyntaxError：import declarations may only appear at top level of a moduleを受け取ります。このSyntaxErrorは、私のコード例にあるように、srcを介してスクリプトをインポートすると消えます。私にとって、これはスクリプトがまったくロードされていないことを示しています。

EDIT2＆ソリューション：@kerbholzソリューションを使用しました。 app.blade.phpのbodyの下部とindex.blade.phpの@stack('scripts')の内側に@section('content')を追加しました。pizza.jsファイルは@Push('stack')です。

私はもう一歩進んだのですが、それでもEDITに記載されているSyntaxErrorを受け取ります。そのための回避策はありますか、またはPizzaService.jsのインポートを削除して、このファイルにも<scipt>-Tagを追加する必要がありますか？

EDIT3：さて、この問題は関係ありません。 ES6モジュールはまだブラウザーでサポートされていないようです。

javascriptphplaravellaravel-blade
16
Andre

_@section_ブロックの外にあるものはレンダリングされません。

_layouts/app.blade.php_を編集して、スタイル/ JavaScriptを表示する場所に@stack('head')を追加できます（HTMLの_<head>_セクションにあることが望ましい）。

次に、@extends('layouts.app')を使用できる任意のブレードファイルで

_@Push('head')
<!-- Styles -->
<link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/components/pizza.js')}}"></script>
@endpush
_

コンテンツをそのスタックにプッシュします。

詳細については、 https://laravel.com/docs/5.6/blade#stacks をご覧ください。

21
kerbholz

index.blade.phpの下部にあるpizza.jsを移動してみてください

    @section('extra-script')

    {{Html::script('js/components/pizza.js')}}

    @endsection

それが役に立てば幸い。

1
Zeeshan Tariq