make component_id available in component's template context

[nerdoc]

Sometimes you have to create child components with need of sub HTML tags with certain IDs. It would come handy to know the ocmponent_id in the template, to create things like

<div id="div_foo_{{ component_id }}">
...
</div>

ATM this is only possible if you save it in a normal attribute, or save it in a "readonly" attribute like _id in __init__(), and override get_context_data to include this attr in the context.

Would you mind to add component_id to the general included context attrs?

[nerdoc]

BTW, maybe component_key as well? In case of anyone needs it?

[adamghill]

@nerdoc Good idea! That should be straight-forward to add it in. I'll do it for the next release. 👍

[adamghill]

Add this is in 1dd2678. It will go live in the next release.

[adamghill]

Should be fixed in 0.44.1 which I just deployed: https://pypi.org/project/django-unicorn/0.44.1/.

[nerdoc]

Hmmm. Using 0.44.1, the values are available under unicorn.component_{key|id|name}, but...:

  ID: {{ unicorn.component_id }}<br/>
  Name: {{ unicorn.component_name }}<br/>
  Key: {{ unicorn.component_key }}<br/>

produces:

ID: UTCAwWeL:core.nullable-check-button:16 
Name: core.nullable-check-button 
Key: 16

What I need here (and I suppose most of the people needing this feature, too...?) is, to use the name and id as their corresponding HTML attributes. But you can't use strings with ":" and ":" in an identifier in HTML.

So a

<input
  id="{{ unicorn.component_id }}"
  name="{{ unicorn.component_name }}"
  ...
>

is not possible here.

I know - if you replace each ./: with an unterline or hyphen, it would be possible, but then the strings would not be tracable back to their origin's component ID...

I think you have to decide - I for myself would even go so far to change names and ids within Unicorn to HTML-usable ones, meaning getting rid of the colons and dots...?

[nerdoc]

A possible (quick & dirty) solution would be replacing the 2 lines in unicorn_view.py, line 488f, with

"component_id": self.component_id.replace(":","_").replace(".","_"),
"component_name": self.component_name.replace(":","_").replace(".","_"),

[adamghill]

Ok, I totally forgot about nested components. That's an internal identifier, so I could potentially change the colon to a pipe | instead? The dot I might just replace as you are here. Thanks for being this to my attention, do you want to make a new issue for this?

[nerdoc]

No, pipe is as good as colon. So if you need these colons as separators internally, the HTML ids could be "shadows" of them, and don't need to be reflected back into python code any more, right.
In this case, my solution with replacing everything with a hyphen or underline would work anyhow - as long as no one comes to the blunt idea of putting that HTML identifier back into code and reference a component in the backend.

What you have to think about is nesting, yes: if some component wants to change data in the parent's backend, it can use parent. But if someone uses e.g. unicorn.component_id in the frontend to reference another component in a row in the backend, struggle begins.

So maybe it is better to keep them "in sync" and use consistent names.
Another possibility would be .replace(":","_").replace(".","-") or .replace(":","__").replace(".","_").