转义Laravel Blade @include JavaScript的内容

Question

我正在使用Laravel中的动态表单。

我已经使用一些JS逻辑将可重用的表单位抽象为@include ，以根据用户添加另一个小部件时传递的id来处理递增的表单name=[] id。

当用户单击以将另一个窗口小部件添加到表单时，我只想简单地调用带有递增计数器的include （所有计数器已排序） ，但是@include的输出对JavaScript并不友好。

到处搜寻，我发现了以下内容：

https://laracasts.com/discuss/channels/general-discussion/blade-content-escaping

...似乎扩展刀片来创建自定义指令可能是答案：

https://laravel.com/docs/5.7/blade#extending-blade

我的问题是，我是否可以使用自定义指令包装@include ，例如@js(@include()) -或-这根本不是解决方法吗？

这是整个项目中此结构的唯一实例，因此我不使用VUE。

谢谢。

编辑：

我试图把一个指令放在一起

Blade::directive('js', function ($expression) { return str_replace(array(' ', "\\n", "\\t", "\\r"), '', $expression); });

问题是@include无法评估...兔子洞

Answer 1

这是我以前做过的事情：

<table id="myTable">
<tr>
<td>{{ Form::input('text', 'first_name[]', null) }}</td>
</tr>
</table>
{{ Form::button('add', ['id' => 'add']) }}

<script>
 $('#add').click(function() {    
    var newrow = $('#myTable tr:last').html();    
    $('#myTable tr').last().after('<tr>' + newrow + '</tr>');
  });
</script>

这只是一个粗略的示例，但足以让您入门。

Answer 2

这个怎么样：

<table id="myTable">
<tr>
<td>{{ Form::input('text', 'first_name[]', null) }}</td>
</tr>
</table>
{{ Form::button('add', ['id' => 'add']) }}

$('#add').click(function() {    
    $.ajax({
    url:"/mylink",
    method:"GET",
    success:function(data){
       $('#myTable tr').last().after('<tr>' + data + '</tr>');      
    }
  });
});

在您的控制器上

public function myMethod()
{
   $data = view('myviewfile')->render();
   return response()->json(['html'=>$data]);
}

在您的路线上：

Route::get('/mylink', 'MyController@myMethod')->name('myRouteName');

Answer 3

您可能没有直接将Blade模板输出分配给JavaScript变量，但是可以使Blade输出不可见（ display: none ），并使用Javascript对其进行引用。

IE，而不是：

var JsElement = @include('blade.template', $data)

您可以在刀片服务器页面上执行此操作：

<div id="template-element" style="display: none">
    @include('blade.template', $data)
</div>

然后参考并通过javascript克隆它：

var JsElement = document.getElementById('template-element');
var clonedElement = JsElement.cloneNode()

Answer 4

我能够通过自定义的Blade指令完成此操作：

AppServiceProvider

Blade::directive('js', function ($expression) { return "<?php echo trim(preg_replace('/\\s+/', ' ', \\$__env->make({$expression}))); ?>"; });

刀片中的JS

var newWidget = '@js("components.widgets", ["widgetId" => 'widgetId'])'; newWidget = newWidget.replace(/widgetId/g,widgetId);

我正在使用替换插入递增的widgetId。

感谢大家的投入。