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);
직접 입력 할 수 없습니다. 그러나 자바 스크립트 함수를 만들고,'photos'를 인수로 사용하여 html 파일에서 호출하십시오. – karthikr
은 js 파일이 외부입니까? –
이것은 로컬 js 파일입니다. 코드 예제를 줄 수 있습니까? –