Background
Lorsque vous souhaitez afficher tel quel de context_data de TemplateView vers html, vous pouvez l'afficher en définissant la balise comme suit.
views.py
from django.views.generic import TemplateView
class SampleTemplateView(TemplateView):
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['areas'] = ["japan","tokyo","osaka","nagoya","sapporo","sendai","fukuoka"]
return context
index.html
...
<ul>
{% for item in areas %}
<li> {{ item }} </li>
{% endif %}
</ul>
...
Est affiché.
Cependant, il y a des moments où vous souhaitez passer une valeur directement lorsque vous souhaitez dessiner à l'aide de la bibliothèque Javascript. Voici comment le faire passer.
Failure
Si vous le passez tel quel, ...
<script type="text/javascript">
var areas = "{{ areas }}";
console.log(areas);
</script>
['japan', 'tokyo', 'osaka', 'nagoya', 'sapporo', 'sendai', 'fukuoka']
Les guillemets simples, "<", ">", etc. sont automatiquement convertis.
Puisqu'il s'agit d'un type de chaîne de caractères, j'ai pensé qu'il serait correct de le dicter avec JSON.parse après l'avoir remplacé par une expression régulière, mais je ne pouvais pas le faire correctement.
Ainsi, à la suite de recherches, j'ai trouvé deux méthodes.
Method 1 C'est flou, mais c'est un moyen d'appeler chaque élément et de l'écrire en code javascript.
var areas = [
{% for area in areas %}
{% with index=forloop.counter0 %}
{% if 0 < index%},{% endif %}
{% endwith %}
"{{area.name}}"
{% endfor %}
];
console.log(areas);
Method 2
L'autre consiste à désactiver le contrôle d'échappement automatique avec ʻautoescape`.
{% autoescape off %}
var areas = {{ areas }};
{% endautoescape %}
console.log(areas);
Celui-ci est plus facile.
Reference
Recommended Posts