Python / Jinja2 - 使用 HTML 语法 (Django) 通过 python 生成的故障渲染列表答案

【问题标题】：Python / Jinja2 - Trouble rendering list generated through python using HTML Syntax (Django)Python / Jinja2 - 使用 HTML 语法 (Django) 通过 python 生成的故障渲染列表
【发布时间】：2018-05-22 21:47:32
【问题描述】：

刚刚学习 python、Jinja 等等，你的帮助会很大！我的 Python 程序提取数据并将其放入列表形式。我的目标是在线显示html表格中每行数据的三个部分。我试图通过使用字符串替换和 html 语法来做到这一点。 3 变量应该位于名称、价格和数量选项卡下。结果是这样的：

以下是我创建格式的方法。我确定我渲染代码的方式与我输入的完全一致，即 html 语法，但我不确定如何输入数据以便识别 html 语法

    card_list = []
    card_info = "<tbody> \
                    <tr> \
                        <th scope='row'>1</th> \
                        <td>{0}</td> \
                        <td>{1}</td> \
                        <td>{2}</td> \
                    </tr> \
                 </tbody>".format(card_name, buy_price, quantity)
                # 3 variables are one line of a list of data
    card_list.append(card_info)
    return card_list

在 Django view.py 中，我这样渲染列表：

from Buylist.buy import get_data
data = get_data(ixalan)
def card_data(request):
    return render(request, 'buylist/basic.html', {'content':data})

而使用 Jinja 的 HtML 看起来像：

{% extends "buylist/header.html" %}

{% block content %}

    <table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>

      # For loop getting data from card_data is here
  {% for c in card_data %}
    {{c}}
  {% endfor %}
</table>
{% endblock %}

非常感谢任何帮助！非常感谢！

【问题讨论】：

默认情况下 Jinja escapes 你所有的 HTML 语法，所以它按原样显示。您可以使用safe，但将所有 HTML 移至模板会是更好的选择。您可以将数据列表以字典的形式存储，并通过模板中的点访问它们。
我明白了！我会试一试并报告

标签： python html-table django-views rendering jinja2

【解决方案1】：

最好将 HTML 代码保存在模板中，而不是从 Python 生成。您可以从 Jinja 模板访问嵌套数据结构，例如元组或字典。以下是使用字典完成此操作的方法（元组可能更容易记忆，但字典更具可读性）：

  {% block content %}
      <table class="table">
    <thead class="thead-inverse">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Price</th>
        <th>Quantity</th>
      </tr>
    </thead>

    {% for item in card_data %}
    <tbody>
      <tr>
        <th scope='row'>1</th>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.quantity}}</td>
      </tr>
    </tbody>
    {% endfor %}
  </table>
  {% endblock %}

您可以将数据放入 dicts 并以相同的方式传递：

data = [  
    {'name': 'Card 1 Name', 'price': 'Card 1 Price', 'quantity': 'Card 1 Quantity'},
    {'name': 'Card 2 Name', 'price': 'Card 2 Price', 'quantity': 'Card 2 Quantity'},
    {'name': 'Card 3 Name', 'price': 'Card 3 Price', 'quantity': 'Card 3 Quantity'},
]

 render(request, 'buylist/basic.html', {'card_data': data})

【讨论】：