使用 HTML 数据属性将刀片阵列注入脚本答案

【问题标题】：Inject Blade Array into script using HTML data attribute使用 HTML 数据属性将刀片阵列注入脚本
【发布时间】：2018-05-17 02:52:40
【问题描述】：

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

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

../en/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') 数组的数据属性中，而不仅仅是每个属性的单个字符串。

【问题讨论】：

标签： php html blade laravel-blade

【解决方案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
);

【讨论】：