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' %}"]出现了问题。这似乎是奇怪的执行，因为它不是将声音插入Django标记并将其作为一个字符串执行，而是将其执行为：src: ["{% static 'audio/%22%2Bsound%2B%22.mp3' %}"]，即尝试解析"+作为字符串的一部分。

我努力弄清楚为什么它在部署时会这样做而不是在本地。此外，任何关于如何使这个过程更好的反馈（也许不使用Javascript中的模板标签，感觉不对）将非常感激，但我真的只想找到任何方式来传递这个{ {1}} Javascript中标记的值。

Answer 1

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

您可以采用的一种方法是使用Django模板循环遍历sounds并将每个静态引用存储在JSON字典中。然后你的javascript可以从中查找所需的值：

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

...

src: [my_references[sound]]

Javascript和Django＆＃39;静态＆＃39;模板标签

1 个答案: