如何使用 Jinja2 在字典列表中单独访问每个字典？

Question

我在 Flask 中有一个包含多个字典的 Python 列表，如下所示（我还使用了列表理解来访问字典）：

app = Flask(__name__)
class Item:
    def __init__(self, vals):
        self.__dict__ = vals

@app.route('/')
def news_page():
    news = [{ "News" : "ABC", "Link" : "http://exampleabc.com", "Date": "01/03/20" },
           { "News" : "DEF", "Link" : "http://exampledef.com", "Date": "02/03/20" },
           { "News" : "GHI", "Link" : "http://exampleghi.com", "Date": "03/03/20" }]
    return render_template('news_screen.html', news = [Item(i) for i in news])

if __name__ == '__main__':
    app.run(debug = True)

我的 HTML 模板如下所示：

<table>
     {% for dict_item in news %}
          <div>
            <tr> {{ dict_item.News }}  </tr> <br>
            <tr> {{ dict_item.Link }}  </tr> <br>
            <tr> {{ dict_item.Date }}  </tr> 
          </div> 
     {% endfor %}
</table>

不幸的是，这会返回所有三个字典（ABC、DEF、GHI），尽管我一次只想要一个，以便我可以分别在不同的幻灯片上显示它们。

电流输出：

ABC
http://exampleabc.com
01/03/20

DEF
http://exampledef.com
02/03/20

GHI
http://exampleghi.com
03/03/20

如何分别访问每个词典，以便一次只能显示“ABC”新闻、链接和日期？

预期输出：

ABC
http://exampleabc.com
01/03/20

Answer 1

您不需要为访问每个项目编写额外的代码。 只需将与字典相同的内容传递给 Jinja Tempalte。 在这里你可以修改一些小的变化。

@app.route('/')
def news_page():
    news = [{ "News" : "ABC", "Link" : "http://exampleabc.com", "Date": "01/03/20" },
           { "News" : "DEF", "Link" : "http://exampledef.com", "Date": "02/03/20" },
           { "News" : "GHI", "Link" : "http://exampleghi.com", "Date": "03/03/20" }]
    return render_template('news_screen.html', news = news )

毕竟，如果您想在 Jinja 模板中获取项目。

<table>
     {% for dict_item in news %}
          <div>
            <tr> <a href="{{ dict_item.Link }}">{{ dict_item.News }}</a></tr> <br>
            <tr> {{ dict_item.Link }}  </tr> <br>
            <tr> {{ dict_item.Date }}  </tr> 
          </div> 
     {% endfor %}
</table>

否则，如果您想在 Jinja 模板中单个项目。

<div class="panel">
      <div class="panel-title"><a href="{{ news[0].Link }}">{{ news[0].News }}</a></div>
      <div class="panel-body">{{news[0].Date}} </div>
</div>