刀片添加劑或動態收益

因此，我正在顯示各種信息卡片的頁面上工作，並且每張卡片都有自己的唯一卡片。我想確保我的JavaScript在每個頁面加載的jquery之後加載，因此它位於主模板的底部。我試圖創建一個名爲「scripts」的第二個yield，以加載該頁面加載的任何名爲腳本的段。這裏是什麼，我試圖做一個非常精簡的例子：刀片添加劑或動態收益

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。

來源

2014-10-08 fishpen0

我認爲你應該以其他方式做。

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個1：

卡/ 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>

來源

2014-10-09 12:26:07

的的document.ready只是一個例子，很多的卡有互動JS元素。我想我一直在想着把js直接拉到身體上，卻沒有意識到我可以先把它們合併成一個部分。這工作得很好，謝謝！ – fishpen0 2014-10-11 03:27:43

刀片添加劑或動態收益

回答

相關問題