带有 Twig 的动态模态数据

Question

我正在显示使用 Twig 的用户列表：

{% for user in user.users %}
    <div class="row user" data-id="{{ user.id }}">
        <div class="col">{{ user.firstname }} {{ user.lastname }}</div>
        <div class="col">{{ user.email }}</div>
        <div class="col">{{ user.lastLogin|date("F j, Y \a\t g:i a") }}</div>
    </div>
{% endfor %}

当用户单击此行时，我希望打开一个模式对话框，其中包含有关该特定用户的其他详细信息。

我考虑过简单地将模态包含在 for 循环中。但是，如果列表包含数百个用户，我不想在每次加载页面时都呈现所有这些额外数据。

我的想法是做这样的事情：

$('body').on('click', '.user', function() {
  $('#user').modal();
});

但我不确定如何通过 twig 在模态中动态呈现被点击用户的数据：

<div class="modal fade" id="user" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            {{ user.firstname }} //additonal data for a given user
        </div>
    </div>
</div>

Answer 1

简单：您可以将数据设置为 .row，如 data-id（data-firstname、data-lastname 等）并替换弹出窗口中的文本，例如：

$('body').on('click', '.user', function() {
  $('#user .modal-content').html($(this).data('firstname'));
  $('#user').modal();
});

更好：通过用户 ID 向服务器发出 ajax 请求并在弹出窗口中显示响应。

Answer 2

正如 Max 所说，有两种方法可以实现这一点。我更喜欢第一种方法，因为您不需要添加所有数据属性，您可以将 twig 模板插入后端函数，如此处 https://symfony.com/doc/current/frontend/encore/server-data.html =>

Answer 3

根据其他两位发帖人提供的一般指导，我最终使用 AJAX 请求开发了解决方案。大纲如下：

控制器：

if ($request->isXMLHttpRequest()) {

    $user = $this->entityManager->getRepository(User::class)->find($request->get('user_id'));

    return $this->render(
        'ui/user-details-modal.html.twig',
       ['user' => $user]
    );
}

Javascript:

$('body').on('click', '.user', function() {
    let id = $(this).data('id');
    return $.ajax({
        type: 'POST',
        url: url,
        data: {user_id: id},
        dataType: 'html',
        success: function(response) { 
            $('#user-details').html(response);
            $('#user').modal();     
        }
    });
});

希望这对其他想做类似事情的人有所帮助。

带有 Twig 的动态模态数据

Dynamic Modal Data with Twig

php

jquery

symfony

twig