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(); 
    }); 
} 

ないneatestソリューションを - HTMLテンプレートもサウンドを再生するためのボタンや、物事の束、クリック機能上のもので、私のJavascriptの参照を作成します。また、Javascript Howlerライブラリを使用して、サウンドの再生を簡単にしています。

これをローカルでテストしたところ、完全に機能しましたが、展開した後、src: ["{% static 'audio/"+sound+".mp3' %}"]という問題が発生しました。 Djangoタグにサウンドを挿入し、それを1つの文字列として実行するのではなく、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]]