@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 的解析錯誤而停止渲染：

錯誤異常
使用未定義的常量 imageId - 假定為“imageId”（這將在 PHP 的未來版本中引發錯誤）

選擇？

我已經看到了一些我個人不喜歡在 Javascript 中加載刀片的AJAX 方法。

調試

如果我注釋掉該行，它仍然會拋出相同的錯誤，直到我完全刪除該行。 因此，我懷疑 JS 模板文字（ ${} ）的花括號被解析為 Laravel 刀片語法（ {{}} ）。

請注意，我嘗試使用單引號和雙引號（如此處所示）代替反引號 ( ` )，但由於它們與 HTML 代碼沖突，因此出現錯誤。

我已經閱讀了關於Blade 和 JS Frameworks的 Laravel 文檔，但是 IMO， @語法和@verbatim都用於完全相反的目的，不會為我服務。

更新

我最終想出了在 JavaScript 中使用 Blade的替代方法：

@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">

Answer 1

Blade 組件由 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>