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 Howler库来简化声音的播放。在

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

我正在努力弄清楚为什么它在部署时会这样做，而不是在本地。另外，对于如何使这个过程更好（也许不使用Javascript中的模板标记，这感觉不太好）的任何反馈都会非常感谢，但实际上我只是在寻找将这个sound值传递给Javascript中的标记的任何方法。在

Answer 1

Django标记由服务器计算，而javascript由客户端浏览器计算。因此，在执行static标记时，sound变量尚未确定。在

可以采取的一种方法是使用Django模板for loop迭代sounds，并将每个静态引用存储在JSON字典中。然后javascript可以从中查找所需的值：

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

...

src: [my_references[sound]]