как сделать шаблон на основе условия в 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-код в свой 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> 

Было бы лучше, чтобы проверить вход на стороне сервера.