key is not explained further - docs should be improved here

[nerdoc]

In the docs there is a poorly helpful explanation how a "key" is used: {% unicorn 'hello-world' key='helloWorldKey' %}

I can't figure out how to use this. Maybe an example would be helpful there.

I think a key is used when useng e.g. a list of "items" that are all components, e.g. with a "delete" button, and the key is the "id" of this item, right?

Maybe you could replace "helloWorldKey" with something more meaningful. Or if you tell me how it should be used, I try to add some documentation there with an example.

[adamghill]

Yeah, I agree my example isn't particularly useful and I think part of the confusion is that there are two concepts of "keys" in Unicorn.

The first "key" is what you explain in your comment above. It can be used as a way of targeting an element when you can't use the element's id.

However, the docs you linked above are for key for a component. This can be useful if you have multiple components with the same name on a page.

For example:

<div>
  First component: {% unicorn 'hello-world' key='first-hello-world' %}
</div>

<div>
  Second component: {% unicorn 'hello-world' key='second-hello-world' %}
</div>

The only time that is useful (I think) is if you want to call a component method in a particular component like https://www.django-unicorn.com/docs/actions/#calling-methods, you can use the component's key. Instead of:

<button onclick="Unicorn.call('hello-world', 'set_name');">
  Set the name from outside the component
</button>

You could do:

<button onclick="Unicorn.call('second-hello-world', 'set_name');">
  Set the name from outside the component
</button>

If you want to update the docs that would be greatly appreciated. The current markdown is at https://github.com/adamghill/django-unicorn.com/blob/master/source/components.md.