[英]Append/Add Laravel blade template to current view using JavaScript
[英]@include Laravel Blade Template to append using Javascript
我正在尝试在 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">
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.