Jinja 中包含 html 的按钮？答案

【问题标题】：Buttons that include html with Jinja?Jinja 中包含 html 的按钮？
【发布时间】：2016-07-22 21:09:46
【问题描述】：

我正在使用 Python 和 Flask 构建一个应用程序。我有一个带有两个选项的下拉按钮。我想要它，以便这两个选项include 在某个 div 中使用不同的 html。有没有办法用 Jinja 做到这一点？我对 Web 开发还很陌生。

这是我所拥有的（不起作用），但显示了我正在尝试做的事情。

 <div class="btn-group" role="group">
        <!-- Split button -->
                <div class="btn-group">
                  <button type="button" class="btn btn-default">Topic Modle</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu">

                    <li><a href="#lsa">LSA</a></li> <!-- I want this button to include vis_lsa.html -->

                    <li><a href="#lda">LDA</a></li> <!-- and this button to include vis_lda.html -->

                  </ul>
                </div>

        {% if #lsa %}
         {% include 'vis_lsa.html' %}
        {% endif %}

        {% if #lda %}
         {% include 'vis_lda.html' %}
        {% endif %}

    </div>

我查看了模板的 Jinja 文档，但没有找到与我正在尝试做的类似的事情。我不确定我是否需要 jQuery 来代替它？我不知道任何 jQuery，所以希望我不需要它来执行此操作。

【问题讨论】：

您有几个选项，其中大部分都包括 JavaScript。另一种方法需要使每个锚点指向一个 URL，以使用请求的包含来呈现页面。但是，没有办法让 HTML 直接与 Jinja 交互。
@dirn，你认为我应该研究 JavaScript 还是 jQuery？ JavaScript 对初学者来说可能更容易？我应该研究 JavaScript 的简单“if”语句并从那里开始吗？不太确定从这里去哪里。感谢您的回复！
这取决于你怎么做。如果你想使用 Ajax，jQuery 将比 vanilla JavaScript 简单得多。如果您预渲染所有内容并只想使用 JavaScript 来切换某些可见性，那么 jQuery 就变得过大了。
@dirn，好的。然后我会检查 Ajax/jQuery。刚开始时，我想切换可见性，但我的最终目标是动态生成并动态显示由 Python 代码生成的内容。

标签： jquery html flask jinja2

【解决方案1】：

您可以在下拉列表中使用包含type="submit" 的表单标签，然后创建一个custom filter 来检查request.form 的值是lsa 还是lda其中包括适当的 html 文件。请求变量是available 到 Jinja。

【讨论】：