为 JavaScript 转义 Laravel Blade @include 内容

Question

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

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

当用户点击向表单添加另一个小部件时，我想简单地调用包含递增计数器 - 全部排序 - 但是，@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

我能够使用自定义刀片指令来完成此操作：

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。

感谢大家的意见。

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 引用它。

I.E.而不是：

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

这就是我之前的做法：

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

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