আমি যখন জ্যাঙ্গো টেমপ্লেট রেন্ডারার ব্যবহার করে কোনও পৃষ্ঠা রেন্ডার করি তখন আমি একটি অভিধান ভেরিয়েবলের মাধ্যমে বিভিন্ন পৃষ্ঠাতে ব্যবহার করে পৃষ্ঠাটিতে হেরফের করতে পারি can {{ myVar }} ।
জাভাস্ক্রিপ্টে একই ভেরিয়েবল অ্যাক্সেস করার কোনও উপায় আছে (সম্ভবত DOM ব্যবহার করে, আমি জানি না কীভাবে জ্যাঙ্গো ভেরিয়েবলগুলি অ্যাক্সেসযোগ্য করে তোলে)? আমি ভেরিয়েবলগুলিতে থাকা মানগুলির উপর ভিত্তি করে একটি এজেএক্স লুকআপ ব্যবহার করে বিশদটি সন্ধান করতে সক্ষম হতে চাই।
উত্তর:
{{variable}}সরাসরি HTML- এ প্রতিস্থাপিত করা হয়। একটি দেখার উত্স করুন; এটি কোনও "পরিবর্তনশীল" বা এর মতো কিছু নয়। এটি কেবল পাঠ্য রেন্ডার হয়েছে।
এটি বলার পরে, আপনি আপনার জাভাস্ক্রিপ্টে এই জাতীয় প্রতিস্থাপন রাখতে পারেন।
<script type="text/javascript">
var a = "{{someDjangoVariable}}";
</script>এটি আপনাকে "গতিশীল" জাভাস্ক্রিপ্ট দেয়।
escapejsফিল্টার উপস্থিত রয়েছে:escapejs('<>') -> u'\\u003C\\u003E'
সতর্কতা জাজানো কোর এবং একইভাবে এক্সএসএস দুর্বলতার সাথে একইভাবে ট্যাগ যুক্ত করার জন্য ব্যবহারকারীদের উত্পন্ন ডেটা সহ এই টেমপ্লেট ট্যাগটি ব্যবহার করে আলোচনার জন্য টিকিট # 17419 দেখুন । মন্তব্য amacneil আলোচনা থেকে উদ্বেগ অধিকাংশ টিকেট উত্থাপিত।
আমি মনে করি এটি করার সর্বাধিক নমনীয় এবং সহজ উপায় হ'ল আপনি জেএস কোডে যে পরিবর্তনগুলি ব্যবহার করতে চান তার জন্য একটি টেম্পলেট ফিল্টার সংজ্ঞায়িত করা। এটি আপনাকে নিশ্চিত করতে সহায়তা করে যে আপনার ডেটা সঠিকভাবে পালিয়ে গেছে এবং আপনি জটিল ডাটা স্ট্রাকচার, যেমন 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>safeযথাযথ রূপান্তর এবং পলায়ন ছাড়াই কেবল মান হিসাবে নিরাপদ হিসাবে চিহ্নিত করে।
function myWidget(config) { /* implementation */ }জেএস ফাইলে ঘোষণা করে এবং কিছু পৃষ্ঠায় এটি ব্যবহার করার চেয়েও ব্যবহার করি myWidget({{ pythonConfig | js }})। তবে আপনি এটি জেএস ফাইলগুলিতে ব্যবহার করতে পারবেন না (যেমন আপনি লক্ষ্য করেছেন), তাই এর সীমাবদ্ধতা রয়েছে।
আমার জন্য কাজ করা একটি সমাধানটি টেমপ্লেটে লুকানো ইনপুট ক্ষেত্রটি ব্যবহার করছে
<input type="hidden" id="myVar" name="variable" value="{{ variable }}">তারপরে জাভাস্ক্রিপ্টে এইভাবে মান পাওয়া,
var myVar = document.getElementById("myVar").value;জ্যাঙ্গো ২.১ হিসাবে, এই ব্যবহারের ক্ষেত্রে টেমপ্লেট ট্যাগে একটি নতুন নির্মিত নির্মিত বিশেষভাবে প্রবর্তিত হয়েছে: json_script ।
https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#json-script
নতুন ট্যাগটি নিরাপদে টেমপ্লেট মানগুলিকে সিরিয়ালাইজ করবে এবং এক্সএসএস থেকে রক্ষা করবে।
জ্যাঙ্গো ডক্স সংক্ষিপ্তসার:
জাভাস্ক্রিপ্ট সহ ব্যবহারের জন্য প্রস্তুত, একটি ট্যাগে আবৃত জেএসএন হিসাবে নিরাপদে একটি পাইথন অবজেক্টকে আউটপুট করে।
আমি খুব সহজেই যা করছি তা এখানে: আমি আমার টেমপ্লেটের জন্য আমার বেস html ফাইলটি সংশোধন করেছি এবং এটি নীচে রেখেছি:
{% if DJdata %}
<script type="text/javascript">
(function () {window.DJdata = {{DJdata|safe}};})();
</script>
{% endif %}তারপরে আমি যখন জাভাস্ক্রিপ্ট ফাইলগুলিতে কোনও ভেরিয়েবলটি ব্যবহার করতে চাই, তখন আমি একটি ডিজেডাটা অভিধান তৈরি করি এবং আমি এটি একটি জেসন দ্বারা প্রসঙ্গে যুক্ত করি: context['DJdata'] = json.dumps(DJdata)
আশা করি এটা সাহায্য করবে!
একটি অভিধানের জন্য, আপনি প্রথমে JSON এ এনকোডিংয়ের সেরা। আপনি সিম্পজসন.ডম্পস () ব্যবহার করতে পারেন বা অ্যাপ ইঞ্জিনে কোনও ডেটা মডেল থেকে রূপান্তর করতে চাইলে আপনি জিকিউএলএনসিডার লাইব্রেরি থেকে এনকোড () ব্যবহার করতে পারেন।
আমি সিমিলার ইস্যুটির মুখোমুখি হয়েছি এবং এস.লোটের প্রস্তাবিত উত্তর আমার পক্ষে কাজ করেছে।
<script type="text/javascript">
var a = "{{someDjangoVariable}}"
</script>তবে আমি এখানে বড় প্রয়োগের সীমাবদ্ধতা নির্দেশ করতে চাই । আপনি যদি নিজের জাভাস্ক্রিপ্ট কোডটি বিভিন্ন ফাইলে রাখার পরিকল্পনা করছেন এবং সেই ফাইলটি আপনার টেম্পলেটে অন্তর্ভুক্ত করবেন। এটি কাজ করবে না।
এটি কেবল তখনই কাজ করবে যখন আপনি প্রধান টেমপ্লেট এবং জাভাস্ক্রিপ্ট কোড একই ফাইলে থাকবেন। সম্ভবত জাঙ্গো দল এই সীমাবদ্ধতাটিকে মোকাবেলা করতে পারে।
আমিও এর সাথে লড়াই করে যাচ্ছি। পৃষ্ঠতলে মনে হয় উপরের সমাধানগুলি কাজ করা উচিত। তবে, জাঙ্গো আর্কিটেকচারের জন্য প্রতিটি এইচটিএমএল ফাইলের নিজস্ব রেন্ডারড ভেরিয়েবল থাকা (যেমন, {{contact}}রেন্ডার করা হয় contact.html, যখন {{posts}}উদাহরণস্বরূপে চলে যায় index.html)। অন্যদিকে, <script>ট্যাগ পরে প্রদর্শিত {%endblock%}মধ্যে base.htmlযা থেকে contact.htmlএবং index.htmlউত্তরাধিকারী। এর মূলত এর অর্থ হ'ল যে কোনও সমাধান সহ
<script type="text/javascript">
var myVar = "{{ myVar }}"
</script>ব্যর্থ হতে বাধ্য, কারণ পরিবর্তনশীল এবং স্ক্রিপ্ট একই ফাইলে সহ থাকতে পারে না।
অবশেষে আমি যে সহজ সমাধানটি নিয়ে এসেছি এবং আমার জন্য কাজ করেছিলাম তা হ'ল আইডি দিয়ে একটি ট্যাগ দিয়ে ভেরিয়েবলটি মোড়ানো এবং পরে জেএস ফাইলটিতে এটি উল্লেখ করা:
// index.html
<div id="myvar">{{ myVar }}</div>এবং তারপর:
// somecode.js
var someVar = document.getElementById("myvar").innerHTML;এবং মাত্র অন্তর্ভুক্ত <script src="static/js/somecode.js"></script>মধ্যে base.htmlযথারীতি। অবশ্যই এটি কেবল বিষয়বস্তু পাওয়ার বিষয়ে। সুরক্ষা সম্পর্কিত, অন্যান্য উত্তরগুলি অনুসরণ করুন।
.textContentপরিবর্তে ব্যবহার করতে চান .innerHTML, কারণ অন্যথায় যে সংস্থাগুলি এইচটিএমএল-এনকোডযুক্ত রয়েছে তারাও জেএস ভেরিয়েবলের অংশ হবে। তবে তারপরেও এটি পুনরুত্পাদন করা হতে পারে 1: 1 (আমি নিশ্চিত না)।
একটি জাভাস্ক্রিপ্ট অবজেক্টটি পাঠাগার হিসাবে জ্যাঙ্গো ক্ষেত্রে সংরক্ষণ করা হয়েছে, যার জন্য আবার একটি জাভাস্ক্রিপ্ট অবজেক্টে অন-পৃষ্ঠায় স্ক্রিপ্টে গতিশীল inোকানো দরকার, আপনাকে escapejsএবং উভয়ই ব্যবহার করতে হবে JSON.parse():
var CropOpts = JSON.parse("{{ profile.last_crop_coords|escapejs }}");জাজানো এর escapejsউদ্ধৃতিটি সঠিকভাবে পরিচালনা করে এবং JSON.parse()স্ট্রিংটিকে জেএস বস্তুতে রূপান্তর করে।
দ্রষ্টব্য, আপনি যদি কোনও বহিরাগত .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আমি জ্যাঙ্গো ২.১ এ এইভাবে ব্যবহার করি এবং আমার পক্ষে কাজ করি এবং এই উপায়টি সুরক্ষিত (রেফারেন্স) :
জ্যাঙ্গো পক্ষ:
def age(request):
mydata = {'age':12}
return render(request, 'test.html', context={"mydata_json": json.dumps(mydata)})এইচটিএমএল দিক:
<script type='text/javascript'>
const mydata = {{ mydata_json|safe }};
console.log(mydata)
</script>আপনি পুরো স্ক্রিপ্টটি একত্রিত করতে পারেন যেখানে আপনার অ্যারে ভেরিয়েবলটি স্ট্রিং হিসাবে ঘোষণা করা হয়েছে, নীচে,
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>"যা নীচে একটি স্ট্রিং উত্পন্ন করবে
prueba = "<script>var data2 =['41','56','25','48','72','34','12'];</script>"এই স্ট্রিং থাকার পরে, আপনাকে অবশ্যই এটি টেমপ্লেটে প্রেরণ করতে হবে
views.py
return render(request, 'example.html', {"prueba": prueba})টেম্পলেটটিতে আপনি এটি পেয়েছেন এবং জাভাস্ক্রিপ্ট কোডের ঠিক আগে যেখানে আপনার এটি প্রয়োজন তার আগে এটি এইচটিএম কোড হিসাবে একটি সাহিতিক উপায়ে ব্যাখ্যা করুন for
টেমপ্লেট
{{ prueba|safe }}এবং নীচে এটি আপনার কোডের বাকী নীচে, মনে রাখবেন যে উদাহরণে ব্যবহারযোগ্য ভেরিয়েবলটি ডেটা 2
<script>
console.log(data2);
</script>এইভাবে আপনি ডেটা ধরণের রাখবেন, যা এই ক্ষেত্রে একটি ব্যবস্থা
aaaকেবলমাত্র সংখ্যার মধ্যে রয়েছে তবে অন্যথায় এক্সএসএস (স্ক্রিপ্ট ইনজেকশন) সম্ভব is
জাভাস্ক্রিপ্টের ভিতরে দুটি জিনিস আমার পক্ষে কাজ করেছে:
'{{context_variable|escapejs }}'এবং অন্যান্য: view.py এ
from json import dumps as jdumps
def func(request):
context={'message': jdumps('hello there')}
return render(request,'index.html',context)এবং এইচটিএমএলে:
{{ message|safe }}