Django Şablon Değişkenleri ve Javascript

Django şablon oluşturucuyu kullanarak bir sayfa oluşturduğumda, bunları kullanarak sayfada işlemek için çeşitli değerler içeren bir sözlük değişkenine geçebilirim {{ myVar }}.

Javascript aynı değişken erişmek için bir yolu var mı (belki DOM kullanarak, nasıl Django değişkenleri erişilebilir hale bilmiyorum)? Ben aktarılan değişkenlerde bulunan değerlere dayalı bir AJAX araması kullanarak ayrıntıları aramak istiyorum.

{{variable}}HTML doğrudan ikame edilir. Bir görünüm kaynağı yapın; "değişken" ya da onun gibi bir şey değildir. Sadece metin haline getirildi.

Bunu söyledikten sonra, JavaScript'inize bu tür bir ikame koyabilirsiniz.

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

Bu size "dinamik" javascript verir.

DİKKAT Django çekirdeğine benzer etiket ekleme ve bu şablon etiketi kullanıcı tarafından oluşturulan verilerle kullanılmaya başlanan olası XSS ​​güvenlik açıkları hakkında tartışma için 17419 numaralı bileti kontrol edin . Amaçneil'den yapılan açıklama , bilette dile getirilen endişelerin çoğunu tartışıyor.

Bunu yapmanın en esnek ve kullanışlı yolunun JS kodunda kullanmak istediğiniz değişkenler için bir şablon filtresi tanımlamak olduğunu düşünüyorum. Bu, verilerinizin düzgün bir şekilde kaçmasını ve verilerinizi dictve gibi karmaşık veri yapılarıyla kullanabilmenizi sağlar list. Bu yüzden bu cevabı çok sayıda upvotes ile kabul edilmiş bir cevap olmasına rağmen yazıyorum.

Şablon filtresi örneği:

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

Bu şablon filtreleri, değişkeni JSON dizesine dönüştürür. Şöyle kullanabilirsiniz:

// myapp/templates/example.html

{% load js %}

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

Benim için çalışan bir çözüm, şablondaki gizli giriş alanını kullanmaktır

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

Sonra javascript değeri bu şekilde elde,

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

Django 2.1 itibarıyla şablon etiketi inşa edilen yeni bu kullanım şeklini özellikle tanıtılmaktadır: json_script.

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

Yeni etiket, şablon değerlerini güvenli bir şekilde serileştirir ve XSS'ye karşı korur.

Django belgeleri alıntı:

JavaScript ile kullanıma hazır bir etikete sarılmış bir Python nesnesini JSON olarak güvenle çıkarır.

İşte çok kolay bir şekilde yapıyorum: Şablonum için base.html dosyamı değiştirdim ve altına koyuyorum:

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

javascript dosyalarında bir değişken kullanmak istediğinizde, ben bir DJdata sözlüğü oluşturmak ve bir json tarafından bağlama eklemek: context['DJdata'] = json.dumps(DJdata)

Umarım yardımcı olur!

Bir sözlük için, önce JSON'a kodlamak en iyisidir. Simplejson.dumps () kullanabilirsiniz veya App Engine'deki bir veri modelinden dönüştürmek istiyorsanız, GQLEncoder kütüphanesinden encode () kullanabilirsiniz.

S.Lott'un önerdiği benzer sorun ve cevaplar benim için çalıştı.

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

Ancak burada büyük uygulama sınırlamalarına dikkat çekmek istiyorum. Javascript kodunuzu farklı bir dosyaya koymayı ve bu dosyayı şablonunuza eklemeyi planlıyorsanız. Bu işe yaramaz.

Bu, yalnızca ana şablon ve javascript kodu aynı dosyadayken çalışır. Muhtemelen django ekibi bu sınırlamayı aşabilir.

Ben de bununla mücadele ediyorum. Yüzeyde yukarıdaki çözümlerin çalışması gerekiyor gibi görünüyor. Bununla birlikte, django mimarisi, her html dosyasının kendi işlenmiş değişkenlerine sahip olmasını gerektirir (yani {{contact}}, işlenir contact.html, {{posts}}örneğin index.html, vb. Öte yandan, <script>etiketler sonra görünen {%endblock%}içinde base.htmlhangi contact.htmlve index.htmlinherit. Bu temel olarak,

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

değişkeni başarısız olur, çünkü değişken ve komut dosyası aynı dosyada birlikte bulunamaz.

Sonunda geldi ve benim için çalıştım basit bir çözüm, sadece id ile bir etiket ile değişkeni sarmak ve daha sonra js dosyasında, böyle başvurmak oldu:

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

ve sonra:

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

ve sadece şunlardır <script src="static/js/somecode.js"></script>içinde base.htmlher zamanki gibi. Tabii ki bu sadece içeriği almakla ilgilidir . Güvenlikle ilgili olarak, diğer cevapları takip edin.

Yine bir JavaScript nesne dinamik Sayfada komut dosyası içine yerleştirilir olmayı gerektiren metinler gibi bir Django alanda depolanan bir JavaScript nesnesi için, her ikisini de kullanmak gerekmez escapejsve JSON.parse():

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

Django's escapejs, alıntıyı düzgün şekilde işler ve JSON.parse()dizeyi tekrar JS nesnesine dönüştürür.

Bir değişkeni harici bir .js komut dosyasına geçirmek istiyorsanız, komut dosyası etiketinizden önce genel bir değişken bildiren başka bir komut dosyası etiketi kullanmanız gerektiğini unutmayın.

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

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

data görünümde her zamanki gibi tanımlanır get_context_data

def get_context_data(self, *args, **kwargs):
    context['myVar'] = True
    return context

Ben Django 2.1 bu şekilde kullanın ve benim için çalışır ve bu şekilde güvenli (başvuru) :

Django tarafı:

def age(request):
    mydata = {'age':12}
    return render(request, 'test.html', context={"mydata_json": json.dumps(mydata)})

Html tarafı:

<script type='text/javascript'>
     const  mydata = {{ mydata_json|safe }};
console.log(mydata)
 </script>

dizi değişkeninizin bir dizede bildirildiği komut dosyasının tamamını aşağıdaki gibi bir araya getirebilirsiniz,

views.py

    aaa = [41, 56, 25, 48, 72, 34, 12]
    prueba = "<script>var data2 =["
    for a in aaa:
        aa = str(a)
        prueba = prueba + "'" + aa + "',"
    prueba = prueba + "];</script>"

aşağıdaki gibi bir dize oluşturur

prueba = "<script>var data2 =['41','56','25','48','72','34','12'];</script>"

bu dizeye sahip olduktan sonra, şablona göndermelisiniz

views.py

return render(request, 'example.html', {"prueba": prueba})

şablonda alırsınız ve ihtiyacınız olan javascript kodundan hemen önce, htm kodu olarak edebi bir şekilde yorumlarsınız, örneğin

şablon

{{ prueba|safe  }}

ve aşağıda kodunuzun geri kalanı, örnekte kullanılacak değişkenin data2 olduğunu unutmayın.

<script>
 console.log(data2);
</script>

bu şekilde veri türünü koruyacaksınız, bu durumda bir düzenleme

Javascript içinde benim için çalışan iki şey var:

'{{context_variable|escapejs }}'

ve diğer: views.py içinde

from json import dumps as jdumps

def func(request):
    context={'message': jdumps('hello there')}
    return render(request,'index.html',context)

ve html'de:

{{ message|safe }}