ember-cli-clipboard dynamic clipboardTarget

Question

I’m using the ember-cli-clipboard wrapper to create a set of buttons within an {{#each}}...{{/each}} loop that should copy a small text to the clipboard if you click it. Each element has its own text and its own button. Unfortunately I can not set the clipboardTarget with a dynamic ID, so the buttons will all copy only from the first element instead of copying from each single element.

The component looks like this:

<ul>
    {{#each element as |item|}}

        {{#copy-button clipboardTarget=".name" success=(action 'copiedCharacter')}}
            <span class="name">{{item.text}}</span>
        {{/copy-button}}

    {{/each}}
</ul>

Instead of the clipboardTarget=".name" I would need something like a {{uniqueID}}:

<ul>
    {{#each element as |item|}}

        {{#copy-button clipboardTarget="{{uniqueID}}" success=(action 'copiedCharacter')}}
            <span id="{{uniqueID}}">{{item.text}}</span>
        {{/copy-button}}

    {{/each}}
</ul>

Creating the ID is not the problem, but passing it inside the {{#copy-button ...}} does not work... any suggestions?

Answer 1

You can use it direclty like this clipboardTarget=uniqueID

        {{#copy-button clipboardTarget=uniqueID success=(action 'copiedCharacter')}}
            <span id={{uniqueID}}>{{item.text}}</span>
        {{/copy-button}}