django 变量到 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20225231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
django variables to javascript
提问by stk-13
I'm trying to make a gallery page using django/js/jquery. Is it possible to pass django template variables to the javascript? I need to implement for loop like:
我正在尝试使用 django/js/jquery 制作图库页面。是否可以将 django 模板变量传递给 javascript？我需要实现 for 循环，如：
{% for post in object_list %}
{% post.title %}
{% post.url %}
{% endfor %}
In my base template I just add my script: (base.html)
在我的基本模板中，我只添加了我的脚本：(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);
回答by Aamir Adnan
If you are including js file as:
如果您将 js 文件包含为：
<script type="text/javascript" src="{% static 'js/some_file.js' %}"></script>
Then you cannot access request context in some_file.js. What you can do is that either move the js code in the template or move it to child template (for reusability) to access request context and include it as:
然后您无法访问some_file.js. 您可以做的是将 js 代码移动到模板中或将其移动到子模板（以实现可重用性）以访问请求上下文并将其包含为：
{% include "some_template_including_js_code.html" %}
Then in the js code you can iterate over context variable containing images url:
然后在 js 代码中，您可以迭代包含图像 url 的上下文变量：
<script type="text/javascript">
var photos = [];
{% for image in images %}
photos.push('{{ image }}');
{% endfor %}
</script>
