使用刀片组件和JavaScript

Question

我正在使用Laravel，我正在尝试使用javascript来填充用户列表。问题是列表的每个条目都基于我在Blade组件中创建的视图：

pro_list_entry.blade.php：

@if( isset($pro_id) && isset($pro_avatar) && isset($pro_name))
    <a onclick='selectProfessional( {{ $pro_id }} , {{ $pro_avatar }}, {{ $pro_name }} )' style='cursor: pointer'>
        <div class='row'>
            <div class='col-4'>
                <img class='u-avatar rounded-circle' src='{{ $pro_avatar }}'>
            </div>
            <div class='col-8 d-flex align-items-center'>
                <h6 class='fm-wrapped-text'>{{ $pro_name }}</h6>
            </div>
        </div>
    </a>
 @endisset

然后我想使用Javascript将所有这些组件提供给列表：

var listOfPhysicians = buildProfessionalListFromData(jsonData.professionals);

$('#pc_new_app_med_list').empty();
$('#pc_new_app_med_list').html(listOfPhysicians);

...

function buildProfessionalListFromData(data) {
    var list = "";

    if (data != null) {
        for (i = 0; i < data.length; i++) {

            var entry =
            "@component('patrons.clinic.shared.pro_list_entry')"
                + "@slot('pro_id')" + data[i].professional_id + "@endslot"
                + "@slot('pro_avatar') ../../user_uploads/avatars/" + data[i].avatar + "@endslot"
                + "@slot('pro_name')" + data[i].prefix + " " + data[i].first_name + " " + data[i].last_name + "@endslot"
            + "@endcomponent";

            list = list + entry;
        }
    }
    return list;
}

经过一番研究，我发现我想做的事情根本不可能。

有没有其他方法可以做到这一点？添加基于视图的列表条目，并使用javascript填充其数据？也许我只是没有看到明显的解决方案。

有帮助吗？

谢谢。

Answer 1

您可以照常编写刀片，并使用render()函数进行渲染。

在你的控制器方法中

 function foo()
 {
    $yourView= SELF::returnYourView();
    return json_encode(['yourView' => $yourView]);
 }

functionv returnYourView()
{
    return view('yourview')->render();
}

在你的jquery

$('your-parent-dev').html(response.yourview);