2014-10-08 1 views
0

Так что я работаю на странице, которая отображает различные информационные карты, и каждая карта имеет свой собственный javascript, уникальный для карты. Я хочу, чтобы мой javascript загружался после jquery, который загружается каждой страницей, поэтому он находится внизу основного шаблона. Я попытался создать второй выход под названием «скрипты» для загрузки в любом разделе сценариев, загружаемых этой страницей. Вот очень разобранный пример того, что я пытаюсь сделать:Добавка лезвия или динамические урожаи

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 

(и т.д ..)

Final Render:

<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 из любой карты, которая называется первой.

ответ

0

Я думаю, вы должны сделать это по-другому.

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> 
+0

document.ready был просто пример, многие из карт имеют интерактивные элементы JS. Наверное, я застрял, думая о том, чтобы потянуть js прямо в тело, не понимая, что смогу объединить их всех в одну секцию сначала. Это работает очень хорошо, спасибо! – fishpen0