动态添加 jinja 模板答案

【问题标题】：Adding jinja template dynamically动态添加 jinja 模板
【发布时间】：2016-08-20 02:19:17
【问题描述】：

我有一个 jinja 模板，它是一组 div 标签内的唯一内容。

<div id="section0">
    {% include 'temppage.html' %}
</div>

当我按下按钮时，我想将标签之间的所有内容替换为其他内容。我希望用另一个 jinja 模板“{% include 'realpage.html' %}”替换它，但首先我不确定如何替换整个部分，而不是只替换一个单词。其次，我什至可以动态添加一个 jinja 模板，还是需要直接用文件内容的字符串替换它。

【问题讨论】：

【解决方案1】：

正如glls所说，替换内容可以用，

document.getElementById("section0").innerHTML = "something";

至于动态添加jinja模板，需要将innerHTML替换成想要的jinja模板的多行字符串，with与反引号“`”一起使用。所以它看起来像，

document.getElementById("section0").innerHTML = `{% include 'realpage.html' %}`;

模板在页面加载时执行（据我所知这是不可避免的），因此在检查实时页面的 html 时，多行字符串将包含您所包含的文件中的任何内容。

【讨论】：

【解决方案2】：

您可以使用 JS 框架（例如 Angular、React...）来实现这一点...我假设您正在尝试构建单页应用程序？

否则，您将不得不更多地依赖 Javascript，以便根据您单击的内容更改 div 下的 HTML。例如，如果您有按钮 1、2、3。每个按钮在单击时呈现不同的 HTML 模板。

示例（使用 jQuery）：

$(document).on('click', '.some-class', function() {
    document.getElementById("section0").innerHTML = "something";
});

仅供参考：“某物”可以是 html 结构。

【讨论】：

该网站将是一个页面，是的。刚刚测试了 jquery 示例以更改 div 内部的内容，并且工作正常，所以谢谢你的那部分。你知道我如何动态地使用 jinja 模板吗？就像“某事”在哪里一样，而是使用“{% include 'realpage.html' %}”
据我所知，Jinja 主要用于在页面加载时生成/渲染 html