2013-11-26 4 views
5

django/js/jquery를 사용하여 갤러리 페이지를 만들려고합니다. 자바 스크립트에 장고 템플릿 변수를 전달할 수 있습니까? 난 그냥 내 스크립트를 추가 내 기본 템플릿에서javascript에 대한 django 변수

{% 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); 
+0

직접 입력 할 수 없습니다. 그러나 자바 스크립트 함수를 만들고,'photos'를 인수로 사용하여 html 파일에서 호출하십시오. – karthikr

+0

은 js 파일이 외부입니까? –

+0

이것은 로컬 js 파일입니다. 코드 예제를 줄 수 있습니까? –

답변

12

등 :

<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> 
+0

감사합니다. 도움이되었습니다. –

관련 문제