使用 HTML 数据属性将 Blade 数组注入脚本

Question

我有一个 blade 模板，其中包含一个脚本。该脚本需要访问语言字符串，这些字符串可在 @lang('intro') 变量中访问。我想知道是否有办法通过 html 数据属性将整个数组注入脚本，然后使用 jquery.

在脚本中检索它

到目前为止我有以下内容：

../en/intro.php:

<?php
return [
    'step1' => 'Welcome',
    'step2' => 'Step 2',
];

../de/intro.php

<?php
return [
    'step1' => 'Willkommen',
    'step2' => 'Schritt 2',
];

在 blade 模板中，我注入了每个字符串：

<script data-id="intro-script" 
        data-introStep1="@lang('intro.step1')" 
        data-introStep2="@lang('intro.step2')" 
        src="{{ mix('js/intro.js') }}">

并在脚本 intro.js:

中使用 jQuery 检索它

document.querySelector('script[data-id="intro-script"]').getAttribute('data-introStep1');

到目前为止这有效，但对于更多的字符串来说效果不佳。我想知道是否可以将 data-introStep1 和 data-introStep2 合并到一个包含整个 @lang('intro') 数组的数据属性中，而不仅仅是每个属性一个字符串。

Answer 1

您的翻译文件可以打包为 JSON 编码字符串，如下所示：

<script data-id="intro-script" 
    data-intro='@json(__('intro'))'
    src="{{ mix('js/intro.js') }}"
></script>

然后，使用 Javascript 检索。

const intro = JSON.parse(
  document.querySelector('script[data-id="intro-script"]').dataset.intro
);

使用 HTML 数据属性将 Blade 数组注入脚本

Inject Blade Array into script using HTML data attribute

html

php

blade

laravel-blade