symfony - 模态 : load content only on click

Question

使用 Symfony2、TWIG 和 Bootstrap，我想显示模式窗口 ( as described here )。

但是我只想在用户单击按钮显示这些模式的内容时加载这些内容，而不是在加载主页时加载。

上下文:我的主页上有一个元素列表，我希望用户能够获得有关某些特定元素的更多信息(一次一个)。因此，用户单击该元素，就会显示模式并显示详细信息。由于元素相当多，而且详细信息加载起来相当繁重，因此我只想按需加载必要的元素。

我知道并且已经使用(用于其他用途)TWIG 的 {% include ... %}、{% embed ... %} 和 { % render ... %}，我知道如何显示 TB Modal，但我没有找到执行我想要的操作的方法:(

<小时/>

[编辑]解决方案

供以后引用。 @Syjin 的回答让我走上了正轨，但一些额外的细节可能有用:-D

在 Twig 主页面中，包含列表的页面:

<a data-toggle="modal" href="{{ path('MyBundle_MyEntity_seeModal', {'entity_id': entity.id}) }}" data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

使用模态内容创建一个新的 Twig 模板 seeModal.html.twig，如文档中所述:

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>

创建相关的路由和Controller的 Action 。

Answer 1

其实答案就在 docs 里.

您可以使用模式的remote选项并指定应加载的路径。或者，如果您使用 data-api，您可以设置 href 并且内容将动态加载(一次)。

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

您可以指定通往渲染模式内容的路由，而不是 remote.html。