动态添加jinja模板

Question

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

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

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

Answer 1

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

一起使用

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

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

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

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

Answer 2

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

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

示例（使用jQuery）：

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

fyi：“某事”可以是一个html结构。