轉義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。

感謝大家的投入。