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之前执行。所以，你实际上是在你的javascript中注入html代码。 {% %}在服务器（服务器端）完成，并发送到模板。在浏览器（客户端）收到模板后完成Javascript。

这有点笨拙，但可以解决时间问题：

<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>

最好检查服务器端的登录信息。

如何在javascript中基于条件渲染模板

1 个答案: