发布于 1年前

Laravel使用laracasts/utilities转换PHP变量为JavaScript变量

laracasts/utilities是开源的项目,项目地址:https://github.com/laracasts/PHP-Vars-To-Js-Transformer

它提供了将PHP变量转换为JavaScript变量的工具。

安装

使用composer安装:

composer require laracasts/utilities
  • Laravel 4: 安装~1.0
  • Laravel 5: 安装~2.0

安装成功后,需要注册绑定。Laravel 5.5+会自动注册。对于低于Laravel 5.5,可以使用JavaScriptServiceProvider来注册:

config/app.php配置provider如下:

'providers' => [
    '...',
    'Laracasts\Utilities\JavaScript\JavaScriptServiceProvider'
];

使用

安装完后,我们既可以使用laracasts/utilities提供的门面JavaScript。

Laravel 5在controller顶部添加:

use JavaScript;

在controller使用:

public function index()
{
    JavaScript::put([
        'foo' => 'bar',
        'user' => User::first(),
        'age' => 29
    ]);

    return View::make('hello');
}

在index方法里把php的变量转换为JavaScript变量,默认情况下,这些JavaScript变量添加到“footer”视图,所以要在JavaScript引用这些变量需要在页面包含“footer”视图:

<body>
    <h1>My Page</h1>

    @include ('footer') // <-- Variables prepended to this view
</body>

接着我们就可以在JavaScript引用:

console.log(foo); // bar
console.log(user); // User Obj
console.log(age); // 29

配置

默认laracasts/utilities会把变量添加到“footer”视图的window对象下。它也提供了修改默认值的方式。

首先需要publish默认的配置:

php artisan vendor:publish

// 或者

php artisan vendor:publish --provider="Laracasts\Utilities\JavaScript\JavaScriptServiceProvider"

它会生成一个新的配置:config/javascript.php,内容如下:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | View to Bind JavaScript Vars To
    |--------------------------------------------------------------------------
    |
    | Set this value to the name of the view (or partial) that
    | you want to prepend all JavaScript variables to.
    |
    */
    'bind_js_vars_to_this_view' => 'footer',

    /*
    |--------------------------------------------------------------------------
    | JavaScript Namespace
    |--------------------------------------------------------------------------
    |
    | By default, we'll add variables to the global window object. However,
    | it's recommended that you change this to some namespace - anything.
    | That way, you can access vars, like "SomeNamespace.someVariable."
    |
    */
    'js_namespace' => 'window'

];

可以看到,配置里有两个配置项:bind_js_vars_to_this_view和js_namespace。

  • bind_js_vars_to_this_view:配置javascript变量添加到的视图,默认为"footer"
  • js_namespace:配置javascript变量添加为哪个对象的属性,默认为window
©2020 edoou.com   京ICP备16001874号-3