django变量到javascript

Question

我正在尝试使用django/js/jquery创建一个图库页面.是否可以将django模板变量传递给javascript？我需要实现for循环:

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

在我的基本模板中,我只需添加我的脚本:(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

如果您将js文件包含为:

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