web-dev-qa-db-fra.com

Laravel, la bonne façon d'importer du javascript dans les modèles de lame

J'utilise Laravel 5.6. Cette page n'a pas fonctionné pour moi.

pizza/index.blade.php ressemble à ceci:

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

J'obtiens une erreur de référence lorsque je clique sur le bouton "add_new_pizza", onClick = "addPizza ()", addPizza () n'est pas défini. Cependant, j'essaie d'importer pizza.js dans index.blade.php

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

l'impression de l'actif ('js/components/pizza.js') renvoie http: // localhost: 8080/js/components/pizza.js qui me semble bien.

public/js/components/pizza.js ressemble à ceci:

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

async function addPizza(){
    // some functionality
}

Cela a également fonctionné lorsque j'avais la fonction addPizza () dans le script sur .blade.php.

Aussi, trouvez le référentiel sur GitHub si vous avez besoin d'autres révisions de code: https://github.com/andrelandgraf/laravel-docker

EDIT: lorsque je copie le fichier pizza.js dans <script><script> Cela fonctionne bien, mais je reçois une erreur de syntaxe: import declarations may only appear at top level of a module. Cette SyntaxError disparaît lorsque j'importe le script via src comme vous pouvez le voir dans mes exemples de code. Pour moi, cela indique que le script n'est pas chargé du tout.

EDIT2 & Solution: J'ai utilisé la solution @kerbholz. J'ai ajouté @stack('scripts') au bas de body dans app.blade.php Et à l'intérieur de @section('content') de index.blade.php Je sais @Push('stack') le fichier pizza.js.

Je suis maintenant un peu plus loin mais je reçois toujours le SyntaxError indiqué dans EDIT. Existe-t-il une solution pour cela ou dois-je simplement supprimer l'importation de PizzaService.js Et ajouter également un <scipt>-Tag Pour ce fichier?

EDIT3: D'accord, ce problème n'est pas lié. Il semble que les modules ES6 ne soient pas encore pris en charge par les navigateurs.

javascriptphplaravellaravel-blade
16
Andre

Tout ce qui se trouve en dehors de votre bloc @section Ne sera pas rendu.

Vous pouvez modifier votre layouts/app.blade.php Et ajouter une @stack('head') où vous voulez que vos styles/javascript apparaissent (de préférence dans la section <head> De votre HTML).

Dans tout fichier blade que @extends('layouts.app') vous pouvez ensuite utiliser

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

pour pousser le contenu dans cette pile.

Pour plus d'informations, visitez https://laravel.com/docs/5.6/blade#stacks

21
kerbholz

Essayez de déplacer pizza.js au bas de index.blade.php

    @section('extra-script')

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

    @endsection

J'espère que ça aide.

1
Zeeshan Tariq