Python/Jinja2 - 使用 HTML 语法(Django)通过 python 生成的渲染列表出现问题

Question

刚刚学习 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 %}

如果有任何帮助，我将不胜感激!非常感谢!

Answer 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})