Javascript 和 Django 'static' 模板标签

Question

我已经设置了一个wee站点来播放一些声音列表，这些列表由我的 view传递。我将直接进入代码：

var sounds = "{{js_sounds|escapejs}}";
sounds = JSON.parse(sounds);
var howls = {};
sounds.forEach(function(sound){
    howls[sound] = new Howl({
        src: ["{% static 'audio/"+sound+".mp3' %}"]
    });
    $(document).on('click', '#'+sound+'_btn_play', function(){
        howls[sound].play();
    });
    $(document).on('click', '#'+sound+'_btn_stop', function(){
        howls[sound].stop();
    });
}

不是最整洁的解决方案 - HTML模板还创建了许多按钮和播放声音的内容，我的JavaScript在单击功能上的javaScript引用。我还使用JavaScript Howler库来简化声音的播放。

现在，当我在本地测试它时，它可以很好地工作，但是在部署后，在src: ["{% static 'audio/"+sound+".mp3' %}"]行中出现了问题。似乎这是很奇怪的，因为它没有将声音插入Django标签并执行为一个字符串，而是将其执行为：src: ["{% static 'audio/%22%2Bsound%2B%22.mp3' %}"]，即试图将"+作为字符串的一部分解析。p>我正在努力弄清楚为什么在部署而不是本地时这样做。另外，关于如何使此过程更好的任何反馈（也许在JavaScript中使用模板标签，这是不正确的），都将不胜感激，但实际上，我只是在寻找将此sound值传递给标签的任何方法在JavaScript中。

Answer 1

django标签由服务器评估，而JavaScript由客户端浏览器评估。结果，当执行static标签时，尚未确定sound变量。

您可以采用的一种方法是使用django模板通过sounds迭代循环，并将每个静态引用存储在JSON字典中。然后，您的JavaScript可以从中查找所需的值：

var my_references = {
{% for sound in sounds %}
    "{{ sound }}":"{% static 'audio/"+sound+".mp3' %}",
{% endfor %}
};
...
src: [my_references[sound]]