javascript - @include Laravel Blade 模板以使用 Javascript 追加

Question

我试图在 PHP 和 Javascript 中重用相同的 HTML 代码。在 PHP 中，我使用 Laravel 的组件机制来加载传递必要参数的文件。

@foreach($files as $file)
    <x-my-file name="my_name[][image]" imageId="{{ $file->id }}" imageUrl="{{ $file->url }}" />
@endforeach

它工作得很好。

在页面底部，我使用如下 jQuery：

@push('scripts')
    <script>
        var imageId = null;
        var imageUrl = '';
        jQuery(function($) {
            $('body').on('click', '#btn-add', function() {
                var imageId    = $(this).data('id');
                var imageUrl   = $(this).data('url');

                $('#target').append(`@include('components.my-file', ['name' => 'my_name[][image]', 'imageId' => 15, 'imageUrl' => '/path/to/an-image.jpg'])`);
            });
        });
    </script>
@endpush

一切正常。每次单击时，同一个组件都会附加我传递的相同数据。

但是，如果我替换以下行的静态值：

$('#target').append(`@include('components.my-file', ['name' => 'my_name[][image]', 'imageId' => 15, 'imageUrl' => '/path/to/an-image.jpg'])`);

使用我拥有的动态值，使用 Javascript 模板文字：

$('#target').append(`@include('components.my-file', ['name' => 'my_name[][image]', 'imageId' => ${imageId}, 'imageUrl' => ${imageUrl}])`);

页面因 Laravel 的 Parse 错误而停止渲染：

ErrorException
使用未定义的常量 imageId - 假定为“imageId”（这将在 PHP 的未来版本中引发错误）

选择？

我已经看到了一些 我个人不喜欢的在 Javascript 中加载刀片的AJAX 方法。

调试

如果我注释掉该行，它仍然会抛出相同的错误，直到我完全删除该行。因此，我怀疑 JS 模板文字 () 的花括号${}被解析为 Laravel 刀片语法 ( {{}})。

请注意，`我尝试使用单引号和双引号（如这里所示）代替反引号 ( )，但由于它们与 HTML 代码冲突而出现错误。

我已经阅读了有关Blade 和 JS 框架的 Laravel 文档，但是 IMO，无论是@语法@verbatim还是出于完全相反的目的，都不会为我服务。

更新

我最终想出了一个在 JavaScript 中使用刀片的替代方案：

@push('scripts')
    <script type="text/template" id="my-template">
        @include('components.my-file', ['name' => 'my_name[][image]'])
    </script>
    <script>
        var template = document.getElementById('my-template').innerHTML;
        console.log(template); // Successful grabbing the HTML.

        $(template).find('.image-placeholder').attr('src', imageUrl); // Replaced the HTML with the modified img tag only.
        console.log(template.prop('outerHTML'));
    </script>
@endpush

使用此代码，我可以在没有动态数据的情况下完美地拥有 HTML。首先console.log是完美地显示 HTML：

<div>
    <img src="" alt="" class="image-placeholder">
    <input type="hidden" name="my_name[][image]" value="">
</div>

现在，到目前为止，模板还不是 Laravel 刀片/组件，所以我必须将我的动态数据放到它上面。当我试图将我的动态数据放到 HTML 中时，HTML 将完全被修改后的<img>字符串替换。第二个console.log输出是：

<img src="/dynamic-path/to/the-image.jpg" alt="" class="image-placeholder">

标签： javascriptlaravel-bladelaravel-8laravel-components

Answer 1

刀片组件由 laravel 提供服务。

从服务器刀片组件返回的响应将不再起作用。

您可以使用某种占位符并像上次一样动态替换它们。

例如，

var template = document.getElementById('my-template').innerHTML;
template = template
  .replace('{src}', 'https://example.com/image.jpg')
  .replace('{id}', 'ImageID')
  .replace('{name}', 'my_name[][image]')

console.log(template)

<!-- 
<script type="text/template" id="my-template">
<x-my-file name="{name}" imageId="{id}" imageUrl="{src}" />
</script>
I am using a template below
-->
<script type="text/template" id="my-template">
<div>
    <img src="{src}" id="{id}" class="image-placeholder">
    <input type="hidden" name="{name}" value="">
</div>
</script>