1
現在、私はウェブアプリケーションの履歴ページに取り組んでいます。 App（Flaskで書かれている）は、履歴をsqliteに保存し、SQLAlchemyを通してdbで動作します。それは以下のようになります。Jinja2テンプレートのモーダルウィンドウ。フラスコ
あなたは、最新のセル内のテキストデータがたくさんある見ることができるように。
さらに、このデータを履歴ページにリストしたいと思います。今の私のコードは次のようになります。それは、このようなビューを生成
{% extends "_base.html" %}
{% block content %}
<div id="div1" class="col-md-3">
<p><a href='/' class='btn btn-primary btn-block' role='button'><span class='glyphicon glyphicon-chevron-left'></span> Back</a></p>
</div>
<div class="bs-example col-md-12">
<br>
<table class="table table-hover">
<thead>
<tr>
<th>Task ID</th>
<th>Date</th>
<th>Host</th>
<th>User</th>
<th>Playbook</th>
<th>Log</th>
</tr>
</thead>
<tbody>
{% for history in histories %}
<tr>
<td>{{ history.task_id }}</td>
<td>{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC</td>
<td>{{ history.hostname }}</td>
<td>{{ history.username }}</td>
<td>{{ history.playbook }}</td>
<td>{{ history.output }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}
：
明らかにそれは見苦しいので、私はとボタンを経由して、この出力（最新のセル）を非表示にすることを決定しましたこの1
そして、私は問題を抱えているこの時点でのように、モジュールウィンドウブートストラップ。私は、次のテンプレートを作成しました：
{% extends "_base.html" %}
{% block content %}
<div id="div1" class="col-md-3">
<p><a href='/' class='btn btn-primary btn-block' role='button'><span class='glyphicon glyphicon-chevron-left'></span> Back</a></p>
</div>
<div class="bs-example col-md-12">
<br>
<table class="table table-hover">
<thead>
<tr>
<th>Task ID</th>
<th>Date</th>
<th>Host</th>
<th>User</th>
<th>Playbook</th>
<th>Log</th>
</tr>
</thead>
<tbody>
{% for history in histories %}
<tr>
<td>{{ history.task_id }}</td>
<td>{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC</td>
<td>{{ history.hostname }}</td>
<td>{{ history.username }}</td>
<td>{{ history.playbook }}</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myOutput">Output</button></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myOutput" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endblock %}
しかし、私はどのようにすべてのモーダルウィンドウのボディに正しい出力を追加する見当もつかない。 <div class="modal fade" id="myOutput1" role="dialog">、<div class="modal fade" id="myOutput2" role="dialog">のような異なるIDを持つコードでたくさんのモーダルウィンドウを生成する必要がありますか？それは正しいでしょうか？