如何根据javascript中的条件呈现模板答案

【问题标题】：how to render template based on condition in javascript如何根据javascript中的条件呈现模板
【发布时间】：2017-06-21 06:49:31
【问题描述】：

如何根据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 控制台中给我错误

什么是最佳做法，在此先感谢。

【问题讨论】：

我也试过javascript的document.write函数，结果还是一样！
模板发生在服务器端。 Javascript发生在客户端。这就是它不起作用的原因。
不，带有谷歌应用引擎的 webapp2 - python
{% %} 模板魔法在 javascript 之前执行。因此，您实际上是将 html 代码注入到您的 javascript 中。
是的，@GAEfan 很到位。 {%} 构建页面，javascript 仅在页面构建后触发。我认为在页面呈现之前您不能访问 localStorage 数据。

标签： javascript google-app-engine local-storage conditional webapp2

【解决方案1】：

{% %} 模板魔法在 javascript 之前执行。因此，您实际上是将 html 代码注入到您的 javascript 中。 {% %} 在服务器（服务器端）上完成，并发送到模板。 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>

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

【讨论】：

这永远不会成为条件的一部分，但是当我通过发出警报来检查“signedIn”的值时，它会说：True
也许它是一个布尔值，而不是一个字符串：if(localStorage.getItem("signedIn")==True){
对不起，我知道它实际上在我的本地存储中是“真”。