django Variablen zu Javascript

Question

Ich versuche, eine Galerieseite mit Django/Js/Jquery zu machen. Ist es möglich, django Template-Variablen an das Javascript zu übergeben? Ich brauche für Schleife zu implementieren wie:

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

In meiner Basisvorlage ich mein Skript nur hinzufügen: (base.html)

<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

Wenn Sie js-Datei unter anderem als:

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

Dann können Sie auf Anfrage Kontext in some_file.js nicht zugreifen. Was Sie tun können, ist, dass entweder den JS-Code in der Vorlage zu bewegen oder zu Kind Vorlage bewegen (für Wiederverwertbarkeit) Anforderungskontext für den Zugriff auf und sind als:

{% include "some_template_including_js_code.html" %} 

Dann in dem js Code, den Sie Kontext laufen können Variable mit Bildern URL:

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