如何使用 Twig 在 1 模式中加载数据

Question

我制作了一个 HTML 表格，其中包含来自数据库的数据。如果我单击一个表格行的标题，应该会打开一个包含该行数据的模式。

现在我是这样解决的：

<table>
{% for item in items %}
<tr>
    <td>
        <td><a href="#" data-toggle="modal" data-target="modal{{ item.id }}">{{ item.name }}</a></td>
    </td>
</tr>
{% endfor %}
</table>

{% for item in items %}
<div class="modal" id="modal{{ item.id }}">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
      <h5 class="modal-title">ID: {{ item.id }}</h5>
      ... 
      </div>
  </div>
</div>

它现在正在工作，没办法。但正如您所见，将为数组中的每个项目创建一个模式。例如，如果我在数组中有 9000 个项目。我将有 9000 个 HTML 模式。我想那不好，所以我正在寻找一种仅使用 1 个模态并根据 ID 包含其内容的方法。

我怎样才能做到这一点，或者使用 twig 和 PHP（不是 symfony 框架，只有 twig 引擎）最好的方法是什么？

我正在为我的模态/表格使用 Bootstrap 4。

编辑：

@entio 将我链接到一个类似的问题，所以我尝试了一下。 首先我按照entio的回答将我的$tickets（包含所有数据的数组）编码为json：

{% autoescape %}
    var globalDataObject = {{ tickets|json_encode()|raw }};
{% endautoescape %}

Json 对象如下所示：

0:
    0: "93"
    1: "3"
    2: "Testticket"
    3: "0"
    4: ""
    5: "2017-12-08 14:43:21"
    6: "0000-00-00 00:00:00"
    7: "2017-12-08 14:43:21"
    8: "test"
    9: "Test"
    description: "test"
    subject: "Testticket"
    closed_at: "0000-00-00 00:00:00"
    closemessage: null
    device: "Test"
    customerid: "3"
    last_answer: "2017-12-08 14:43:21"
    opened_at: "2017-12-08 14:43:21"
    state: "0"
    ticketid: "93"
1:
    0: "94"
[...]

我现在的问题是我不知道如何访问这个 json 对象。 entio 的链接问题的答案对我没有帮助。我当前的代码（复制 % 粘贴并更改链接答案）：

<script type="text/javascript">
    {% autoescape %}
    var globalDataObject = {{ tickets|json_encode()|raw }};
    {% endautoescape %}

    (function($) {
    var myModal = $('#ticketModal');
    $('#subject').on('click', function(){
        $.ajax({
          type: 'GET',
          url: 'home.php?ticketid='+$(this).data('id'),
          dataType: 'json',
          success: function(data){
            htmlData = '<h1>Test:'+data.subject';
            myModal.find('.modal-body').html(htmlData);
            modal.modal('show);
          }
       });
       return false;
   });
})(jQuery);
</script>

我的表格行的 HTML 代码更改为：

<td><a href="#" id="subject" data-id="{{ ticket.ticketid }}">{{ ticket.subject}}</a></td>

因此，表格中所有行的数据 ID 都是数据库 ID。 我现在如何在 Json 中搜索正确的项目并打开一个包含来自 json 对象的数据的模态？

当前的 Javascript 代码不起作用。我想这是因为我从来没有访问过globalDataObject。

Answer 1

如果你不想涉及 JS，那么你必须生成所有节点。

否则，您可以将包含所有数据的对象传递给 JS，并让它在点击事件时动态创建模式。解析为 json 可以使用 json_encode 过滤器：

<script type="text/javascript">
    var globalDataObject = {{ yourDataObject|json_encode() }};
</script>

这有点相关，因此您可以从它的答案中学习： Load JSON data into a Bootstrap modal