Django 템플릿 변수와 Javascript

StackOverflow https://stackoverflow.com/questions/298772

문제

때 나는 렌더링을 사용하여 페이지 Django 템플릿을 렌더러,전달할 수 있 사전에서는 변수를 포함한 다양한 값을 조작에서 그들을 사용하여 페이지 {{ myVar }}.

하는 방법이 있 액세스 같은 변수에서 자바스크립트(아마도를 사용하 DOM,내가 알지 못하는 방법 Django 은 변수가 액세스할 수)?할 수 있는 상세정보 조회를 사용하여 AJAX 조회 값을 기준으로 포함되어에서 변수를 전달됩니다.

도움이 되었습니까?

해결책

그만큼 {{variable}} HTML로 직접 대체됩니다. 보기 소스를 수행하십시오. "변수"또는 그와 비슷한 것이 아닙니다. 방금 렌더링 된 텍스트입니다.

이런 종류의 대체를 JavaScript에 넣을 수 있습니다.

<script type="text/javascript"> 
   var a = "{{someDjangoVariable}}";
</script>

이것은 "동적"JavaScript를 제공합니다.

다른 팁

주의 체크인 티켓 #17419 에 대한 토론에서는 추가 유사한 꼬리표로 Django 핵심 가능한 XSS 취약점을 도입하여 사용하는 이 템플릿은 태그가 사용자 데이터를 생성합니다. Comment 에서 amacneil 에 대해 설명합의 대부분은 문제가 발생하여 티켓에.

제가 생각하는 가장 유연하고 편리한 방법의 하고 이를 정의합니다 템플릿에 대한 필터 변수에서 사용할 JS 코드입니다.이것은 당신을 위해,당신의 데이터가 제대로 탈출 그리고 당신은 그것을 사용할 수 있는 복잡한 데이터 구조,등 dict 고 list.그 이유는 내가 이것을 쓰고 대답에도 불구하고 있는 것은 허용된 응답을 많이 늦게 집에 가서 만들고있다.

여기에는 예입니다 템플릿 여과기:

// myapp/templatetags/js.py

from django.utils.safestring import mark_safe
from django.template import Library

import json


register = Library()


@register.filter(is_safe=True)
def js(obj):
    return mark_safe(json.dumps(obj))

이 템플릿 필터를 변환하는 변수 JSON 문자열입니다.당신은 그것을 사용할 수 있습니다.

// myapp/templates/example.html

{% load js %}

<script type="text/javascript">
    var someVar = {{ some_var | js }};
</script>

나를 위해 일한 솔루션은 템플릿에서 숨겨진 입력 필드를 사용하는 것입니다.

<input type="hidden" id="myVar" name="variable" value="{{ variable }}">

그런 다음 이런 식으로 JavaScript로 값을 얻는다.

var myVar = document.getElementById("myVar").value;

변수가 django에 의해 반환되면 모든 따옴표를 다음으로 바꿉니다. &quot;. 사용 {{someDjangoVariable|safe}} JavaScript 오류가 발생합니다.

이 사용을 수정하려면 JavaScript를 사용하십시오 .replace:

<script type="text/javascript"> 
    var json = "{{someDjangoVariable}}".replace(/&quot;/g,"\"")
</script>

사전의 경우 먼저 JSON을 인코딩하는 것이 가장 좋습니다. simplejson.dumps ()를 사용하거나 App Engine의 데이터 모델에서 변환하려면 gqlencoder 라이브러리에서 encode ()를 사용할 수 있습니다.

Django 2.1 에서이 유스 케이스를 위해 특별히 내장 된 템플릿 태그가 도입되었습니다. json_script.

https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#json-script.

새 태그는 템플릿 값을 안전하게 직렬화하고 XSS로부터 보호합니다.

다음은 매우 쉽게 수행하는 일입니다. 템플릿에 대한 base.html 파일을 수정하고 하단에 넣었습니다.

{% if DJdata %}
    <script type="text/javascript">
        (function () {window.DJdata = {{DJdata|safe}};})();
    </script>
{% endif %}

그런 다음 JavaScript 파일에서 변수를 사용하려면 DJDATA 사전을 만들고 JSON의 컨텍스트에 추가합니다. context['DJdata'] = json.dumps(DJdata)

도움이되기를 바랍니다!

나는 Simillar 문제에 직면하고 있었고 S.Lott가 제안한 대답이 나를 위해 일했습니다.

<script type="text/javascript"> 
   var a = "{{someDjangoVariable}}"
</script>

그러나 나는 지적하고 싶습니다 주요 구현 제한 여기. JavaScript 코드를 다른 파일에 넣고 해당 파일을 템플릿에 포함시키려는 경우. 이것은 작동하지 않습니다.

기본 템플릿과 JavaScript 코드가 동일한 파일에있을 때만 작동합니다. 아마도 Django 팀은이 제한을 해결할 수 있습니다.

나도 이것으로 어려움을 겪고있다. 표면적으로 위의 솔루션이 작동해야합니다. 그러나 Django 아키텍처에는 각 HTML 파일에 자체 렌더링 된 변수가 있어야합니다 (즉, 즉, {{contact}} 렌더링됩니다 contact.html, 동안 {{posts}} 예를 들어갑니다 index.html 등등). 반면에, <script> 태그가 나타납니다 {%endblock%} 안에 base.html 어떤에서 contact.html 그리고 index.html 상속. 이것은 기본적으로 모든 솔루션을 포함한다는 것을 의미합니다 

<script type="text/javascript">
    var myVar = "{{ myVar }}"
</script>

변수와 스크립트가 동일한 파일에서 공존 할 수 없기 때문에 실패해야합니다.

내가 생각해 낸 간단한 솔루션은 ID가있는 태그로 변수를 래핑하고 나중에 JS 파일에서 다음과 같이 참조하는 것이 었습니다.

// index.html
<div id="myvar">{{ myVar }}</div>

그리고:

// somecode.js
var someVar = document.getElementById("myvar").innerHTML;

그리고 그냥 포함하십시오 <script src="static/js/somecode.js"></script> 안에 base.html 평소와 같이. 물론 이것은 단지 쯤에 있습니다 구하는 내용. 보안과 관련하여 다른 답변 만 따르십시오.

텍스트로 Django 필드에 저장된 JavaScript 객체의 경우 다시 한 페이지 스크립트에 동적으로 삽입 된 JavaScript 객체가되어야합니다. escapejs 그리고 JSON.parse():

var CropOpts = JSON.parse("{{ profile.last_crop_coords|escapejs }}");

장고의 escapejs 인용문을 올바르게 처리하고 JSON.parse() 문자열을 JS 객체로 다시 변환합니다.

변수를 외부 .js 스크립트로 전달하려면 전역 변수를 선언하는 다른 스크립트 태그를 사용하여 스크립트 태그 앞에 있어야합니다.

<script type="text/javascript">
    var myVar = "{{ myVar }}"
</script>

<script type="text/javascript" src="{% static "scripts/my_script.js" %}"></script>

data 평소와 같이보기에 정의됩니다 get_context_data

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top