Pass data to javascript file

[franciscobmacedo]

Is there a way to pass template context data to the javascript file?

usecase: I want to use a unique ID attribute for an html element and I want to query said element in the javascript file.

template

<div id="{{unique_id}}">...</div>

javascript

// I'm assuming the varialbe is passed along through 'data' attributes

const data = document.currentScript.dataset;
const unique_id = data.unique_id;
const element = document.querySelector(unique_id);

[EmilStenstrom]

Hi @franciscobmacedo! Great question. I'm thinking we should maybe create a unique ID for each instance of a component automatically and make that easy accessible.

But for now, I think you could override render_js_dependencies and just replace <script with <script data.... Does that work?

[EmilStenstrom]

Oh wait. If you specify your javascript as a dependency it will just be rendered once, which kind of defeats the purpose. I guess you could put the script tag in the template file?

[franciscobmacedo]

Thanks for the quick reply! Creating a unique id for each component is a great idea.

Yes, that solution works, if one is writing javascript directly in a python file.

However, I was trying to keep js code in a separate file and to pass this data to the specified js file only (so that I can safely use document.currentScript in the js file).

I belive in that case I would have to somehow override the django widgets Media render_js function - which I'm not sure how to do it?

Or maybe you have another suggestion to achieve this? I'm also happy to investigate

[franciscobmacedo]

Ah,ok, I didn't know that the dependent js file will only be rendered once even if there are multiple instances of the component in the same page - but that makes sense.

Ok, in that case, I guess one has to keep the js code inside the template to make this work

[EmilStenstrom]

Could you define a function in the js dependency, and call it with a unique ID from the template?

[franciscobmacedo]

The problem is that the js dependency is not available when the template calls the function. To ilustrate:

template

<div class="component-calendar">
    Hello from calendar component!
</div>
<script data-id="{{id}}">
    const data = document.currentScript.dataset;
    buildCalendar(data.id)
</script>

javascript file

  (function () {
    const buildCalendar = (id) => {
      console.log("id is", id);
    };
  })();

This throws an exception:

Uncaught ReferenceError: buildCalendar is not defined

[JuroOravec]

Not an answer to this question directly, but want to throw it out there. In my project we use AlpineJS, and I structure django components to have (mostly) the same boundaries as AlpineJS components. And it works fairly well, because AlpineJS is in charge of ensuring that each AlpineJS component has its own JS context and is initialized when the component is rendered in the browser.

And to pass different data for different component instances, I pass the data from Django to HTML (as dataset), and then from within AlpineJS I query the HTML element for the data.

AlpineJS also handles the case of generating unique IDs for their components on the spot. See https://alpinejs.dev/magics/id