Question

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

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

../烯/ intro.php：

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

../ DE / intro.php

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

在刀片模板中，我正在注入每个字符串：

<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数据属性

1 个答案: