jshannon63 / laravel-baton
将命名路由和其他集合数据从Laravel Blade视图共享到JavaScript
Requires
- php: >=7.0.0
- laravel/framework: ^5.5
This package is not auto-updated.
Last update: 2024-09-20 06:56:21 UTC
README
Baton注册了一个全局视图组合器,这将启用将Baton集合传递到所有视图。Baton集合包含所有命名路由(可选)以及您希望在渲染视图之前添加到集合中的任何其他值。
如果您正在寻找一个更灵活的包,该包专门设计为仅将命名路由传递到客户端,我建议您使用tightenco/ziggy。它为此功能提供了更多选项。当您希望使用集合并快速/轻松地将数据传递到JavaScript时,Baton是一个不错的选择。
安装
composer require jshannon63/laravel-baton
Laravel 5.5+将自动处理服务提供者注册。
用法
配置
Baton默认将命名路由传递到渲染的视图。如果您希望禁用此操作,请将以下行添加到您的.env文件中。
BATON_ROUTES = false // Disable returning named routes in Baton
默认情况下,Baton包含一个名为"routes"的命名路由集合
array:1 [▼ "routes" => Collection {#201 ▼ #items: array:9 [▼ "blogs" => Collection {#206 ▼ #items: array:2 [▼ "uri" => "blog" "methods" => array:2 [▼ 0 => "GET" 1 => "HEAD" ] ] } "login" => Collection {#205 ▶} "logout" => Collection {#216 ▶} "register" => Collection {#217 ▶} "password.request" => Collection {#218 ▶} "password.email" => Collection {#219 ▶} "password.reset" => Collection {#220 ▶} "home" => Collection {#221 ▶} "about" => Collection {#222 ▶} ] } ]
在将数据传递到视图之前向Baton添加额外数据
Baton是Collection类的扩展。您可以使用Illuminate\Support\Collection的方法添加、操作或删除任何集合元素。
示例:向Baton添加博客文章
首先,创建以下实时Facade为Baton
use Facades/Jshannon63/Baton/Baton;
然后通过Facade使用Baton的put方法。
Baton::put( 'article', Blog::find(1) );
在视图中渲染Baton数据
!!{baton}!!声明将被替换为JavaScript兼容的变量声明。请注意,用于将我们的$baton变量嵌入blade视图的语法将防止由htmlspecialchars()函数转义。您可以在视图的任何地方放置!!{$baton}!!。您可以选择将其作为window.baton提供,甚至在其Vue组件或其他JavaScript实现中提供。
这是渲染之前...
... <!-- JAVASCRIPT --> <script type="text/javascript" src="/js/app.js"></script> <script type="text/javascript"> {!!$baton!!} </script> <!-- END JAVASCRIPT --> </body> </html>
这是渲染之后...
... <!-- JAVASCRIPT --> <script type="text/javascript" src="/js/app.js"></script> <script type="text/javascript"> var baton = JSON.parse('{"routes":{"blogs":{"uri":"blog","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]},"register":{"uri":"register","methods":["GET","HEAD"]},"password.request":{"uri":"password\/reset","methods":["GET","HEAD"]},"password.email":{"uri":"password\/email","methods":["POST"]},"password.reset":{"uri":"password\/reset\/{token}","methods":["GET","HEAD"]},"home":{"uri":"home","methods":["GET","HEAD"]},"about":{"uri":"about","methods":["GET","HEAD"]}}}'); </script> <!-- END JAVASCRIPT --> </body> </html>
在上面的示例中,博客路由URI在客户端作为window.baton.routes.blogs可用
贡献
如果您想贡献,请参阅CONTRIBUTING.md