متغيرات قالب جانغو وجافا سكريبت

Question

عندما أقوم بعرض صفحة باستخدام عارض قالب Django، يمكنني تمرير متغير قاموس يحتوي على قيم مختلفة لمعالجتها في الصفحة باستخدام {{ myVar }}.

هل هناك طريقة للوصول إلى نفس المتغير في جافا سكريبت (ربما باستخدام DOM، لا أعرف كيف يجعل Django المتغيرات قابلة للوصول)؟أريد أن أكون قادرًا على البحث عن التفاصيل باستخدام بحث AJAX استنادًا إلى القيم الموجودة في المتغيرات التي تم تمريرها.

Answer 1

ويتم استبدال و{{variable}} مباشرة في HTML. القيام عرض المصدر. أنها ليست "متغير" أو أي شيء مثل ذلك. انها جعلت النص فقط.

وأما وقد قلت ذلك، يمكنك وضع هذا النوع من استبدال في جافا سكريبت.

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

وهذا يعطي لكم "دينامية" جافا سكريبت.

Answer 2

<القوي> تنبيه حدد تذكرة # 17419 للحصول على مناقشة على إضافة بطاقة مماثلة في جانغو الأساسية ونقاط الضعف XSS الممكنة قدم باستخدام هذه العلامة القالب مع المستخدم إنشاء البيانات. تعليق من amacneil يناقش أكثر من الشواغل التي أثيرت في التذكرة.

---

وأعتقد أن الطريقة الأكثر مرونة ومفيد للقيام بذلك هي لتحديد مرشح قالب للمتغيرات التي تريد استخدامها في التعليمات البرمجية JS. هذا يسمح لك لضمان أن البيانات الخاصة بك ونجا بشكل صحيح ويمكنك استخدامه مع هياكل البيانات المعقدة، مثل dict وlist. لهذا السبب أنا أكتب هذا الجواب على الرغم من وجود إجابة مقبولة مع الكثير من upvotes.

وهنا مثال من مرشح قالب:

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

Answer 3

والحل التي عملت بالنسبة لي يستخدم حقل إدخال مخبأة في القالب

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

وبعد ذلك الحصول على قيمة في جافا سكريبت بهذه الطريقة،

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

Answer 4

وعندما يتم إرجاع المتغير من قبل جانغو يتحول كل نقلت إلى ". باستخدام {{someDjangoVariable|safe}} يسبب خطأ جافا سكريبت.

لإصلاح هذا الاستخدام جافا سكريبت .replace:

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

Answer 5

لالقاموس، كنت أفضل الترميز لJSON أولا. يمكنك استخدام simplejson.dumps () أو إذا كنت ترغب في تحويل من نموذج البيانات في محرك التطبيقات، يمكنك استخدام ترميز () من مكتبة GQLEncoder.

Answer 6

واعتبارا من جانغو 2.1، جديدة بنيت في بطاقة قالب تم عرضه خصيصا لهذه الحالة استخدام: json_script

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

العلامة الجديدة تسلسل بأمان القيم قالب ويحمي ضد XSS.

Answer 7

وهنا هو ما أقوم به بسهولة جدا: I تعديل ملف base.html بلدي لبلدي القالب ووضع هذا في الجزء السفلي:

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

وبعد ذلك عندما أريد أن استخدام متغير في ملفات جافا سكريبت، وإنشاء قاموس DJdata وأنا إضافته إلى سياق من قبل سلمان: context['DJdata'] = json.dumps(DJdata)

ونأمل أن يساعد!

Answer 8

كنت أواجه مشكلة مماثلة والإجابة التي اقترحها S.Lott كانت مفيدة لي.

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

ومع ذلك أود أن أشير قيود التنفيذ الرئيسية هنا.إذا كنت تخطط لوضع كود جافا سكريبت الخاص بك في ملف مختلف وتضمين هذا الملف في القالب الخاص بك.هذا لن ينجح.

يعمل هذا فقط عندما يكون القالب الرئيسي وكود جافا سكريبت في نفس الملف.ربما يستطيع فريق Django معالجة هذا القيد.

Answer 9

ولقد كنت تناضل مع هذا أيضا. على السطح يبدو أن الحلول السابقة يجب أن تعمل. ومع ذلك، يتطلب بنية جانغو أن كل ملف أتش تي أم أل ديه المتغيرات الخاصة المقدمة (أي، يتم تقديم {{contact}} إلى contact.html، في حين يذهب {{posts}} لمثل index.html وهلم جرا). من ناحية أخرى، تظهر علامات <script> بعد {%endblock%} في base.html التي contact.html وindex.html يرث. وهذا يعني أساسا أن أي حل بما في ذلك

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

لا بد أن تفشل، لأن المتغير والسيناريو لا يمكن أن تتعايش في نفس الملف.

والحل بسيط I جاءت في نهاية المطاف مع وعملت بالنسبة لي، هو مجرد التفاف متغير مع علامة بالمعرف والرجوع في وقت لاحق في ملف شبيبة، كما يلي:

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

وبعد ذلك:

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

ووعادل وتشمل <script src="static/js/somecode.js"></script> في base.html كالمعتاد. بالطبع هذه ليست سوى حوالي <م> الحصول على المحتوى. وفيما يتعلق بالأمن، ما عليك سوى اتباع إجابات أخرى.

Answer 10

لكائن جافا سكريبت تخزينها في حقل جانغو كنص، الذي يحتاج لتصبح مرة أخرى كائن جافا سكريبت إدخال حيوي في البرنامج النصي على الصفحات، تحتاج إلى استخدام كل escapejs وJSON.parse():

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

وescapejs جانغو يعالج نقلا عن صحيح، وJSON.parse() تحويل السلسلة مرة أخرى إلى كائن JS.

Answer 11

ملحوظة، أنه إذا كنت تريد تمرير متغير إلى برنامج نصي شبيبة الخارجي ثم عليك أن تسبق العلامة السيناريو الخاص بك مع العلامة النصي آخر أن يعلن متغير عمومي.

<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