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?

score 0 · Accepted Answer · answered May 16 '17 at 10:43

0

You can use it direclty like this clipboardTarget=uniqueID

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

answered May 16 '17 at 10:43

Ember Freak

12,918
4
24
54

1

how nice ... i thought it is a syntax thing.. I just needed to add a ´#´ for an id element to get it work as `clipboardTarget `. I made something like `clipboardTargeWithHash`. Thanks for the hint! – Viktor May 16 '17 at 11:37
You are welcome...just a hint there is [concat helper](https://emberjs.com/api/classes/Ember.Templates.helpers.html#method_concat) which may be useful for simple concatenation. – Ember Freak May 16 '17 at 11:46

ember-cli-clipboard dynamic clipboardTarget

1 Answers1