Javascript和Django'静态'模板标签

Question

我有一个小网站设置播放一些声音，其列表由我的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咆哮库来简化声音的播放。

现在，当我在本地测试它时，它工作得很好，但是在我部署之后，在src: ["{% static 'audio/"+sound+".mp3' %}"]行出现了一个问题src: ["{% static 'audio/"+sound+".mp3' %}"] 。 这似乎是奇怪的执行，因为它不是将声音插入Django标签并将其作为一个字符串执行，而是似乎执行它： src: ["{% static 'audio/%22%2Bsound%2B%22.mp3' %}"] ，即尝试解析"+作为字符串的一部分。

我正在努力弄清楚为什么它在部署时会这样做而不是在本地。 此外，任何有关如何使这个过程更好的反馈（也许不使用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]]