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]]