javascript - 如何根据javascript中的条件渲染模板

Question

如何基于 javascript 条件语句渲染模板，即

<script type="text/javascript">
    if(localStorage.getItem("signedIn")=="True"){
        {% include 'shared/headers/simple-header.html' %}
    }else{
        {% include 'shared/headers/loggedin-header.html' %}
    }
</script>

上面的代码不起作用，它在 JavaScript 控制台中给我错误

什么是最佳实践，提前致谢。

Answer 1

{% %} 模板魔法在 javascript 之前执行。因此，您实际上是将 html 代码注入(inject)到您的 javascript 中。 {% %} 在服务器(服务器端)完成，并发送到模板。 Javascript 在收到模板后在浏览器(客户端)中完成。

这有点hacky，但解决了时间问题:

<div id="simpleHeader" style="display:none;">
    {% include 'shared/headers/simple-header.html' %}
</div>
<div id="loggedInHeader" style="display:none;">
    {% include 'shared/headers/loggedin-header.html' %}
</div>

<script>
    if(localStorage.getItem("signedIn")=="True"){  // if string "True", no quotes if Boolean True
        document.getElementById("loggedInHeader").style.display = "block";
    }else{
        document.getElementById("simpleHeader").style.display = "block";
    }
</script>

最好在服务器端检查登录情况。