Django模板语言和javascript答案

【问题标题】：Django template language and javascriptDjango模板语言和javascript
【发布时间】：2017-01-07 06:37:43
【问题描述】：

下面的 html 代码生成两个链接，当悬停时将输出相应的音频文件。我的问题是，如果我有一个存储在 Django 数据库中的链接表，我如何在 javascript 中输出它，以便使用 Django 模板语言我可以遍历链接表以填充 window.onload 函数？还是有更有效的方法？

<head>
<script type="text/javascript">
    window.onload = function() {
        // collecting elements
        var welcomeSound = document.getElementById('welcomeSound');
        var welcomeTxt = document.getElementById('welcomeTxt');

        var sdSound = document.getElementById('shutdownSound');
        var sdTxt = document.getElementById('shutdownTxt');
        //playing welcome sound on mouse over
        welcomeTxt.onmouseover = function() {
            welcomeSound.play();
            return false;
        };

        sdTxt.onmouseover = function() {
            sdSound.play();
            return false;
        };

    };
</script>
</head>
<html>
<section>
    <audio id="welcomeSound" controls="controls" preload="auto">
        <source src="welcome.ogg"></source>
        Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) browsers.
    </audio>
    <audio id="shutdownSound" controls="controls" preload="auto">
        <source src="shutdown.ogg"></source>
        Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) browsers.
    </audio>
    <p class="info">
        Use latest Browser Chrome or FireFox.
        <br /> If you usig Internet download manager please close it.
    </p>

    <a id="welcomeTxt" href="#">
    Welcome(Mouse hover here)
 </a>
    <br />
    <br />
    <br />
    <a id="shutdownTxt" href="#">
  Shutdown(Mouse hover here)
 </a>
</section>

</html>

【问题讨论】：

由于您的 javascript 在模板中，您可以像在模板中的其他地方一样使用 {{ }} 中的模板变量并使用 {% for %} 等循环
如果我的 javascript 是外部的怎么办？
如果它在外部.js 文件中，简短的回答似乎是“否”。我已经在这个网站上看到了一些解决方案，但没有一个对我来说是理想的，我还没有尝试过。但是，我在 <script></script> 标签内的 js 中使用了 Django 模板标签，并且从来没有遇到过问题。我所做的一件事是将脚本标签和随附的 javascript 放入它自己的模板中，并在我需要使用它时 {% include %} 它。这样你的脚本和模板就有点分开了，至少对我来说这有助于我在工作时专注于另一个。

标签： javascript django django-templates

【解决方案1】：

这只是一个玩具示例，根据您所拥有的内容可能对您有用。我以前以这种方式动态创建 JavaScript 并且从未遇到任何问题，但 我无法谈论性能或是否有更好的方法。我认为有更好的方法，但这种方法已经并且继续为我工作，所以我想我会分享它。对于此示例，soundlinks 必须是音频文件的路径列表。

<head>
    <script type="text/javascript">
     window.onload = function() {
         // collecting elements
         {% for link in soundlinks %}
         var sound{{ forloop.counter }} = document.getElementById('sound{{ forloop.counter }}');
         var text{{ forloop.counter }} document.getElementById('text{{ forloop.counter }}');
         ...

          text{{ forloop.counter }}.onmouseover = function() {
              sound{{ forloop.counter}}.play();
              return false;
          };
         {% endfor %}
     };
    </script>
</head>
<html>
    <section>
        {% for link in soundlinks %}
        <audio id="sound{{ forloop.counter }}" controls="controls" preload="auto">
            <source src="{{ link }}"></source>
        </audio>
        <a id="text{{ forloop.counter }}" href="#">
            Hover to play audiofile #{{ forloop.counter }}
        </a>
        {% endfor %}
    </section>
</html>

如果您也可以在.js 文件中使用模板标签，那就太好了，但是据我所知，您不能这样做（尽管我在此站点上看到了一些解决方法）。我用来保持我的 JavaScript 和 html 在视觉上分离的一个技巧是将 JS 放在它自己的模板中，并将 {% include %} 它放在另一个模板中。比如audioscript.html：

<script type="text/javascript">
 window.onload = function() {
     // collecting elements
     {% for link in soundlinks %}
     var sound{{ forloop.counter }} = document.getElementById('sound{{ forloop.counter }}');
     var text{{ forloop.counter }} document.getElementById('text{{ forloop.counter }}');
     ...

      text{{ forloop.counter }}.onmouseover = function() {
          sound{{ forloop.counter}}.play();
          return false;
      };
     {% endfor %}
 };
</script>

然后在另一个模板中：

<head>
{% include 'audioscript.html' %}
</head>
<html>
    <section>
        {% for link in soundlinks %}
        <audio id="sound{{ forloop.counter }}" controls="controls" preload="auto">
            <source src="{{ link }}"></source>
        </audio>
        <a id="text{{ forloop.counter }}" href="#">
            Hover to play audiofile #{{ forloop.counter }}
        </a>
        {% endfor %}
    </section>
</html>

【讨论】：