jshannon63/laravel-baton

将命名路由和其他集合数据从Laravel Blade视图共享到JavaScript

v0.1.0 2017-09-06 04:30 UTC

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