堆栈内存溢出
  繁体   English   中英

在刀片模板中包含 js 文件

[英]include js file in blade templating

 原文  2020-07-31 16:16:52  4   1    javascript/ laravel/ laravel-blade/ laravel-7/ scaffolding

问题描述

我正在使用 laravel 和刀片模板引擎编写应用程序。 我将我的页面特定脚本包含在一个名为 page-scripts 的部分中，该部分在放置主脚本的主布局中产生，但这不起作用，我不断收到“无法读取 null 的属性 x”，这意味着 dom 元素脚本不可见。

这是主要布局

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- CSRF Token -->
 <meta name="csrf-token" content="{{ csrf_token() }}">

 <title>{{ config('app.name', 'Laravel') }}</title>

 <!-- Scripts -->
 <script src="{{ asset('js/app.js') }}" defer></script>
 @yield('page-scripts')

 <!-- Fonts -->
 <link rel="dns-prefetch" href="//fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,400;0,800;0,900;1,800&display=swap" rel="stylesheet">

 <!-- Styles -->
 <link href="{{ asset('css/main.css') }}" rel="stylesheet">
</head>
<body>
 <div id="app">

     @auth
         <nav class="flex items-center justify-between flex-wrap bg-red-500 p-6 font-nunito">
             <div class="flex items-center flex-shrink-0 text-white mr-6">
                 <span class="font-semibold text-xl tracking-tight">Innova</span>
             </div>
             <div class="block lg:hidden">
                 <button class="flex items-center px-3 py-2 border rounded text-white border-teal-400 hover:text-white hover:border-white">
                     <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
                 </button>
             </div>
             <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
                 <div class="text-sm lg:flex-grow">
                     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">
                         Lista canali
                     </a>
                     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">
                         Generale
                     </a>
                     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white">
                         Profilo
                     </a>
                 </div>
                 <div>
                     <a href="{{ route('logout') }}"
                        onclick="event.preventDefault();
                    document.getElementById('logout-form').submit();" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-red-500 hover:bg-white mt-4 lg:mt-0">Logout</a>
                     <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                         @csrf
                     </form>
                 </div>
             </div>
         </nav>
     @endauth

     <main class="py-4">
         @yield('content')
     </main>
 </div>
</body>
</html>

在这里，我有我的一页


@section('page-scripts')
    <script type="text/javascript" src="{{ URL::asset('js/page.js') }}"></script>

@endsection

@section('content')
    <form class="w-full max-w-lg" action="{{'/post/'.Request::path()}}" method="POST">
        @csrf
        <div class="flex flex-wrap -mx-3 mb-6 font-nunito">
            <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                <label class="block tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
                    Condividi qualcosa con gli altri innovatori
                </label>
                <input  class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" name="title" placeholder="Titolo"/>
                @error('title')
                <p class="text-red-500 text-xs italic">Il post deve avere un titolo</p>
                @enderror
                <textarea  class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" name="body" placeholder="Testo"></textarea>
                @error('body')
                <p class="text-red-500 text-xs italic">Niente post muti ci spiace</p>
                @enderror

                <div id="tag-output"></div>
                @error('tag')
                <p class="text-red-500 text-xs italic">il post deve contenere tag</p>
                @enderror
                <input  id='tag-input' class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" placeholder="Tags"/>
                <input  id='tag-value'   style="display: none" name="tags" placeholder="Tags"/>


                <button class="flex-shrink-0 bg-red-500 hover:bg-red-500 border-red-500 hover:border-red-500 text-sm border-4 text-white py-1 px-2 rounded" >
                    Condividi
                </button>

            </div>
        </div>
    </form>
    @forelse($channel->posts as $post)
    <h1>{{$post->title}}</h1>
    @foreach($post->comments as $comment)
        <div id="{{$comment->id}}" class="comment-container">
        <p>{{$comment->body}}</p>
        <button id="reply-button-{{$comment->id}}">reply</button>
        <form id='reply-form-{{$comment->id}}' action="/{{$channel->id}}/reply/{{$comment->id}}" method="POST" class="invisible">
            @csrf
            <input  class=" appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" name="body" placeholder="commenta"/>
            @error('body')
            <p class="text-red-500 text-xs italic">la risposta deve avere un testo</p>
            @enderror
        </form>
        </div>
    @endforeach
        <form action="/{{$channel->id}}/comment/{{$post->id}}" method="POST">
            @csrf
            <input  class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" name="body" placeholder="commenta"/>
            <button class="flex-shrink-0 bg-red-500 hover:bg-red-500 border-red-500 hover:border-red-500 text-sm border-4 text-white py-1 px-2 rounded" >
                Commenta
            </button>
            @error('body')
            <p class="text-red-500 text-xs italic">il commento deve avere un testo</p>

            @enderror
        </form>
    @empty
    <p>No posts yet</p>
    @endforelse


@endsection

在主布局中包含我的所有脚本将不起作用，因为它们对于没有常规页面元素的其他页面也可见

我该如何进行这项工作？

1 个解决方案

解决方案1
 0 已采纳  2020-07-31 16:27:20

JS 的处理方式不同。 它不是屈服的，而是堆叠的。

改变

@yield('page-scripts')

至

@stack('page-scripts')

并使用

@push('page-scripts')
    <script type="text/javascript" src="{{ URL::asset('js/page.js') }}"></script>
@endpush

在你看来。 查看更多信息： https://laravel.com/docs/7.x/blade#stacks

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在doT.js模板系统中包含文件 Django模板包含js块 在发送刀片模板之前包含/执行JS Laravel livewire，如何在刀片中包含 javascript 文件 如何在dot.js模板引擎中包含页眉和页脚？ 如何在 laravel 刀片模板中使用 JS 文件？ 在 laravel 的刀片文件中调用 js function 如何在Laravel Blade文件中初始化（）JS jQuery在外部js文件中起作用，但在视图刀片中不起作用 在js文件中包含jQuery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM