Question

所以我正在开发一个显示各种信息卡的页面，每张卡片都有自己独有的javascript卡。我想确保我的javascript在jquery之后加载，jquery由每个页面加载，因此它位于主模板的底部。我试图创建第二个名为＆＃34; scripts＆＃34;加载到该页面加载的任何名为脚本的部分。这是我正在尝试做的一个非常简单的例子：

body.blade：

<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        @yield('content')

        {{-- jQuery --}}
        {{ HTML::script('/js/jquery-1.11.1.min.js') }}
        {{-- Other JS from various pages loaded in via blade after jquery.--}}
        @yield('scripts', '')
    </body>
</html>

cards.blade：

@extends('body')

@section('content')

<div class="container">
    @include('cards.foo')
    @include('cards.bar')
    @include('cards.baz')
    @include('cards.fizz')
    @include('cards.buzz')
</div>
@stop

cards.foo.blade：

<div id="foo">
    <p> some info about foo </p>
</div>

@section('scripts')
<script>
    $(document).ready( function () {
        alert("foo");
    } );
</script>

@stop

cards.bar.blade：

<div id="bar">
    <p> something to do with bar </p>
</div>

@section('scripts')
<script>
    $(document).ready( function () {
        alert("bar");
    } );
</script>

@stop

（等）

最终渲染：

<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <div class="container">
            <div id="foo">
                <p> some info about foo </p>
            </div>
            <div id="bar">
                <p> something to do with bar </p>
            </div>
        </div>
        <script src='/js/jquery-1.11.1.min.js'></script>
        <script>
            $(document).ready( function () {
                alert("foo");
            } );
        </script>
    </body>
</html>

我想要的是什么：

<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <div class="container">
            <div id="foo">
                <p> some info about foo </p>
            </div>
            <div id="bar">
                <p> something to do with bar </p>
            </div>
        </div>
        <script src='/js/jquery-1.11.1.min.js'></script>
        <script>
            $(document).ready( function () {
                alert("foo");
            } );
        </script>
        <script>
            $(document).ready( function () {
                alert("bar");
            } );
        </script>
    </body>
</html>

卡片是动态的，所以我不知道哪些卡片可能已加载。我不认为我需要将每张卡的收益添加到网站的主模板中。这个想法是卡片我可以相当模块化添加，因为它们是自包含的，但我目前的解决方案只能从首先调用的卡片中加载javascript。

Answer 1

我认为你应该以其他方式去做。

body.blade.php - 未更改

<强> cards.blade.php

@extends('body')

@section('content')

<div class="container">
    @include('cards.foo')
    @include('cards.bar')
    @include('cards.baz')
    @include('cards.fizz')
    @include('cards.buzz')
</div>
@stop

@section('scripts')
    @include('cards.foo_js')
    @include('cards.bar_js')
    @include('cards.baz_js')
    @include('cards.fizz_js')
    @include('cards.buzz_js')
@stop

现在将所有文件分成2个：

<强>卡/ foo.blade.php

<div id="foo">
    <p> some info about foo </p>
</div>

<强>卡/ foo_js.blade.php

<script>
    $(document).ready( function () {
        alert("foo");
    } );
</script>

当然，如果在每张卡片中你只使用文件准备好这样做是没有意义的，你应该将document.ready合并到一个并且在每个js文件中只显示alert("foo");和在body.blade.php执行：

<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        @yield('content')

        {{-- jQuery --}}
        {{ HTML::script('/js/jquery-1.11.1.min.js') }}
        {{-- Other JS from various pages loaded in via blade after jquery.--}}

    <script>
        $(document).ready( function () {
            @yield('scripts', '')
        } );
    </script>
    </body>
</html>

刀片添加剂或动态产量

1 个答案: