首页 > 解决方案 > 使用 Twig 的动态模态数据

问题描述

我正在显示使用 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>

标签: phpjquerysymfonytwig

解决方案


正如 Max 所说,有两种方法可以实现这一目标。我更喜欢第一种方法,因为您不需要添加所有数据属性,您可以将树枝模板插入后端功能,如此处所述https://symfony.com/doc/current/frontend/encore/server-data。 html => 在此处输入图像描述


推荐阅读