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

Posted

技术标签:

【中文标题】@include Laravel Blade 模板以使用 Javascript 追加【英文标题】:@include Laravel Blade Template to append using Javascript 【发布时间】:2021-09-18 23:13:51 【问题描述】:

我正在尝试在 phpjavascript 中重用相同的 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 错误而停止渲染:

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

替代方案?

我看到someAJAX methods 在 Javascript 中加载我个人不喜欢的刀片。

调试

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

请注意,我尝试使用单引号和双引号 (as can be seen here) 而不是反引号 (`),但由于它们与 HTML 代码冲突而出现错误。

我已经阅读了 Blade and JS Frameworks 上的 Laravel 文档,但在 IMO,@ 语法和 @verbatim 的目的完全相反,不会为我服务。

更新

我最终想出了 an alternative 在 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=""  class="image-placeholder">
    <input type="hidden" name="my_name[][image]" value="">
</div>

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

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

【问题讨论】:

【参考方案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>

【讨论】:

技术上这是不可能的。因为我正在调用 Blade 组件,我在其中通过 PHP 放置动态内容。假设隐藏字段如:&lt;input type="hidden" name=" $name " value=" $imageId "&gt;img 标签如:@if($imageId &amp;&amp; $upload) &lt;img src=" $upload-&gt;getFileUrl($upload-&gt;file) " alt=" resolveFieldName($upload) " class="image-placeholder w-100" /&gt; @endif。我精通模板占位符技术,但是因为有 Laravel 组件,我不能使用这种方法。 你可以使用livewire

以上是关于@include Laravel Blade 模板以使用 Javascript 追加的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Blade 模板部分重复/缓存错误

1+X web中级 Laravel学习笔记——blade模版

如何使用Laravel Blade模板呈现以下类型的表?

Laravel - blade 基础语法和include的使用

laravel5.1框架基础之Blade模板继承简单使用方法分析

Laravel 4 Blade 模板文档