动态添加 jinja 模板

Question

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

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

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

Answer 1

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

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

示例（使用 jQuery）：

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

仅供参考："something" 可以是 html 结构。

Answer 2

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

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

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

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

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

动态添加 jinja 模板

Adding jinja template dynamically

html

javascript

python

jinja2