All geek questions in one place

Javascript variables in HTML templates in Django

I am writing a Django application, and although I am a little familiar with Django, I am pretty unfamiliar with JavaScript. I am adding a few lines of JavaScript to one of my pages to enable the map.

The script simply includes initializing the map and adding markers according to the information stored in my database.

Given that there is so little code, would it be considered bad practice to leave the script in the HTML template and pass the information from my database using {{info}} ?

If so, which method do you consider the best?

+5
source share
3 answers

I assume that you suggest putting both the JS script and the data it needs into the template (the data is entered into the JS script via string interpolation)

You can see how this can quickly get out of hand. Below I provide the organization levels of the code in an approximate ascending order (the further, the better, in general)

1. Enable JS using a script tag not embedded in HTML

First: putting JS in your own .js file and including it via the <script> easy. So do it. Moreover, modern browsers can download files in parallel, which is why it is a plus for downloading HTML and JS files at the same time.

2. Avoid submitting data to JS using a Django template

Now another problem that I saw was passing data to JS using <script>data = {"info": "something"}</script> before including their JS code.

This is not ideal for many reasons, due to the fact that in a Django template, data is interpolated line by line:

3. Make JS pull data through the Django API (REST)

However, since you said that you were familiar with Django, I would suggest that you create a view that returns the data that JS needs for your client side in JSON format. For instance. what returns {"info": "something"} on /api/info .

There are many ways to achieve this, here is a start (although it may be obsolete)

Then I would have a script.js file that would read the data using a simple HTTP GET call. Many JS libraries can do this for you easily.

Some advantages of this approach

  • Your code (part of JS) is not dependent on part of the data (JSON data)
  • You can easily view / test what was being fed into your JSON, as it just requested an HTTP GET
  • Your HTML / JS part is completely static and therefore cachable, which improves page loading performance.
  • Converting Python data to JSON is quite simple (without kung-fu interpolation)
+1
source

Yes, this is a bad practice.

Consider the definition of a static folder for your application, as described on the official django documentation page: Manage static files and load js through the static template tag .

You can get the data that is in the {{ info }} variable by creating a separate django view that will return JsonResponse and then run an AJAX request to retrieve the required data from the newly created js file.

+1
source

In my Django projects, if I use a "base" template that extends every other template, I just put the "extrahead" HTML block inside <head></head> in the HTML.

 <html> <head> ........ other header stuff ........ include other scripts {% block extrahead %} {% endblock %} </head> ............. </html>

... and then use this block only in the template on which you want to include the card. Does this suggest that this is just static js code?

0
source

Source: https://habr.com/ru/post/1240811/

More articles:


All Articles