Экранирующее лезвие Ларавеля @include Содержимое для JavaScript

Question

Я работаю с динамической формой в Laravel.

Я абстрагировал повторно используемые биты формы в @include с некоторой JS-логикой для обработки возрастающей формы name=[] идентификаторы на основе идентификатора, переданного, когда пользователь добавляет другой виджет.

Когда пользователь щелкает, чтобы добавить другой виджет в форму, я хотел бы просто вызвать включение с увеличенным счетчиком - это все отсортировано - однако вывод @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.

Спасибо.

Edit:

Я пытался составить директиву

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

Я использую замену для вставки увеличивающегося idgetId.

Спасибо за вклад каждого.

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.

т.е. вместо:

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>

Это просто грубый пример, но этого должно быть достаточно, чтобы начать работу.