Wie eine Django-Variable von HTML-Seite an Javascript übergeben wird

Question

Meine Website hat eine Sidebar, die auf allen Seiten gleich ist. Um zu vermeiden, das HTML für die Seitenleiste für jede Seite kopieren und einfügen Ich schrieb einige Javascript als diese Antwort vorgeschlagen: How can I make my navi-bar the same across my html?

Ich bin glücklich mit diesen Ergebnissen mit Ausnahme einer Sache, zeigt meine Sidebar Dinge wie der Name des Benutzers, die Ich greife mit {{ request.user.get_full_name }}, aber das funktioniert nicht, wenn ich das in meine sidebar.js. So dachte ich, eine gute Arbeit wäre, um eine var user={{request.user.get_full_name}} in der <script> Tags in meiner HTML-Datei und dann <h3>user</h3> in meinem js, aber ich bin mir nicht sicher, wie das zu tun.

Das ist meine sidebar.js

document.getElementById("navMenu").innerHTML = 
    '<a href="/profile/" style="text-decoration: none; color: white;"><div id="circle"><span class="glyphicon glyphicon-user"></span></div><h3>Your Name</h3></a>'+ 
    '<ul class="nav nav-pills nav-stacked" style="text-align: left;">'+ 
    '<li><a href="/userhome/"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a></li>'+ 
    '<li><a href="/profile/"><i class="fa fa-user fa-fw" aria-hidden="true"></i>&nbsp; Profile</a></li>'+ 
    '<li><a href="#"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>&nbsp; Messages</a></li>'+ 
    '<li><a href="/boards/"><i class="fa fa-users fa-fw" aria-hidden="true"></i>&nbsp; Boards</a></li>'+ 
    '<li><a href="#"><i class="fa fa-newspaper-o fa-fw" aria-hidden="true"></i>&nbsp; Feed</a></li>'+ 
    '<li><a href="#"><i class="fa fa-globe fa-fw" aria-hidden="true"></i>&nbsp; Notifications</a></li>'+ 
    '<li><a href="#"><label for="logout" style="font-size: 15px; font-weight: inherit;"><i class="fa fa-lock fa-fw" aria-hidden="true"></i>&nbsp; Logout</label></a></li>'+ 
    '</ul>'; 

So in der zweiten Zeile, wo es <h3>Your Name</h3> hat ich, dass der Benutzer variabel sein will. Und das ist, wie ich versuche, die Variable in meiner HTML-Seite zu übergeben:

<div id="sidebar"> 
    <nav id="navMenu"></nav> 
    <script src="{% static 'app/js/sidebar.js' %}">var user={{request.user.get_full_name}}</script> 
    <!-- logout button/form --> 
    <form action="/" method="post"> 
    {% csrf_token %} 
    <input class="hidden" id="logout" type="submit" value="Logout"/> 
    </form> 
</div> 

Ich möchte mit PHP vermeiden. Die Quintessenz ist, kann ich Django wie das innerhalb der <script> Tags verwenden und wenn ja, wie verwende ich dann diese Variable in meinem Javascript?

Answer 1

Ich kann die Referenz nicht finden, aber ich bin skeptisch <script src="something.js"> kann auch Quelle darin haben. Ich habe es nicht gesehen, dass ich mich erinnern kann.

Diese funktionieren sollte, die ähnlich ist, was Sie tun:

<script> 
    var user = '{{request.user.get_full_name}}'; // created by your django html 
</script> 
<script src="{% static 'app/js/sidebar.js' %}"></script> 

Und dann in Ihrem sidebar.js Sie brauchen nur zu tun:

"....<h3>" + user + "<h3>..." 

jedoch ein sauberer Weg, dies zu tun wäre, Ihre js in eine Funktion zu kapseln, die den Benutzernamen als Parameter verwendet:

Wo Ihre js ist so etwas wie,

function sidebar(user) { 
    document.getElementById("navMenu").innerHTML = "....<h3>" + user + ";<h3>..." 
} 

Gefolgt von:

<script> 
    sidebar('{{request.user.get_full_name}}'); // where this is created via your template. 
</script>