刀片添加剂或动态收益

因此，我正在显示各种信息卡片的页面上工作，并且每张卡片都有自己的唯一卡片。我想确保我的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

刀片添加剂或动态收益

回答

相关问题