javascriptへのdjango変数

Question

私はdjango/js/jqueryを使ってギャラリーページを作ろうとしています。 djangoテンプレート変数をjavascriptに渡すことはできますか？私はちょうど私のスクリプトを追加私の基本テンプレートで

{% for post in object_list %} 
    {% post.title %} 
    {% post.url %} 
{% endfor %} 

： は、私のようなforループを実装する必要が （base.html）あなたはJSファイルを含める場合

<script src="{{STATIC_URL}}assets/js/script.js"></script> 

(function($){ 
    var photos = [ 
     'media/photos/1.jpg', 
     'media/photos/2.jpg', // I need to get them through a for loop 
     'media/photos/3.jpg', 
     'media/photos/4.jpg', 
    ]; 
    $(document).ready(function(){ 
     var page = 0, 
      loaded = 0, 
      perpage = 5, 
      main = $('#main'), 
      expected = perpage, 
      loadMore = $('#loadMore'); 
     main.on('image-loaded', function(){ 
      loaded++; 
      NProgress.set(loaded/expected); 

      if(page*perpage >= photos.length){ 
       loadMore.remove(); 
      } 
     }); 
     loadMore.click(function(e){ 
      e.preventDefault(); 
      loaded = 0; 
      expected = 0; 
      var deferred = $.Deferred().resolve(); 
      $.each(photos.slice(page*perpage, page*perpage + perpage), function(){ 
       deferred = main.showImage(this, deferred); 
       expected++; 
      }); 
      NProgress.start(); 
      page++; 
     }); 
     loadMore.click(); 
    }); 
    $.fn.showImage = function(src, deferred){ 
     var elem = $(this); 
     console.log(elem); 
     var result = $.Deferred(); 
     var holder = $('<div class="photo" />').appendTo(elem); 
     var datetime = $('<p>test</p>').appendTo(elem); // and add {{ post.date }} here 
     var img = $('<img>'); 
     img.load(function(){ 
      deferred.always(function(){ 
       elem.trigger('image-loaded'); 
       img.hide().appendTo(holder).delay(100).fadeIn('fast', function(){ 

        result.resolve() 
       }); 
      }); 
     }); 

     img.attr('src', src); 
     return result; 
    } 
})(jQuery); 

Answer 1

として：

<script type="text/javascript" src="{% static 'js/some_file.js' %}"></script> 

次に、あなたはsome_file.jsに要求コンテキストにアクセスすることはできません。そして、JSコードで、あなたが文脈を反復処理することができます

{% include "some_template_including_js_code.html" %} 

：何ができることは、テンプレートにJSコードを移動したり、要求コンテキストにアクセスするために（再利用のための）子テンプレートに移動し、としてそれを含めるのいずれかということです変数を含む変数url：

<script type="text/javascript"> 
    var photos = []; 
    {% for image in images %} 
     photos.push('{{ image }}'); 
    {% endfor %} 
</script>