2013-11-26 25 views
5

django/js/jquery kullanarak bir galeri sayfası yapmaya çalışıyorum. Django şablon değişkenlerini javascript'e geçirmek mümkün mü? Sadece komut dosyası eklemek benim taban şablonundajavascript için django değişkenleri

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

: ben gibi döngü için uygulamak gerekir (base.html) Eğer js dosyasını dahil ediyorsanız

<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

Bunu doğrudan yapamazsınız. Ancak, bir javascript işlevi oluşturun ve argüman olarak "photos" ile html dosyasından arayın. – karthikr

+0

js dosyası harici mi? –

+0

Bu yerel bir js dosyasıdır. Kod örneği verebilir misin? –

cevap

12

olarak:

some_file.js some_file.js'da istek bağlamına erişemezsiniz. Sonra js kodunda sen bağlamı adımlayabilirsiniz

{% include "some_template_including_js_code.html" %} 

: Ne yapabilirsiniz şablonda js kodunu taşımak veya istek bağlamına erişmeye (kullanırlılık) çocuk şablona taşımak ve olarak dahil şart koşmaktadır değişken içeren görüntüler. url:

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

Teşekkür ederiz. Bu yardımcı oldu. –

İlgili konular