Ruby on Rails presse-papiers-rails d'émission de copie url dynamique

Question

donc je voulais copier l'URL de chaque ressource pour le presse-papiers donc j'ai essayé:

<% @posts.each do |post|%> 
<script> 
$(document).ready(function(){ 

    var clipboard = new Clipboard('.clipboard-btn'); 
    console.log(clipboard); 

}); 
</script> 
<textarea id="bar"><%= post_path(post)%></textarea> 

<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar"> 
    Copy to clipboard 
</button> 
<% end %> 

Mais le problème qui a été seulement copié l'url du première ressource. J'ai donc essayé ceci:

<% @posts.each do |post|%> 
<script> 
$(document).ready(function(){ 

    var clipboard = new Clipboard('.clipboard-btn<%=post.id%>'); 
    console.log(clipboard); 

}); 
</script> 
<textarea id="bar<%=post.id%>"><%= post_path(post)%></textarea> 

<button class="clipboard-btn<%=post.id%>" data-clipboard-action="copy" data-clipboard-target="#bar<%=post.id%>"> 
    Copy to clipboard 
</button> 
<% end %> 

sans chance

Answer 1

Vous pouvez déplacer votre script en dehors de l'itération, afin de créer un seul, pas un pour chacun de vos messages à l'intérieur @posts, et d'utiliser un moyen de faire correspondre chaque élément du DOM avec classe en commençant par clipboard-btn, de sorte que vous n'avez pas besoin d'ajouter l'identifiant, comme:

<% @posts.each do |post|%> 
    <textarea id="bar<%= post.id %>"> 
    <%= post_path(post) %> 
    </textarea> 

    <button 
    class="clipboard-btn<%= post.id %>" 
    data-clipboard-action="copy" 
    data-clipboard-target="#bar<%= post.id %>"> 
    Copy to clipboard 
    </button> 
<% end %> 

<script> 
    $(document).ready(function(){ 
    var clipboard = new Clipboard('[class^="clipboard-btn"]'); 
    }); 
</script> 

A titre d'exemple:

$(document).ready(function() { 
 
    var clipboard = new Clipboard('[class^="clipboard-btn"]'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script> 
 

 
<textarea id="bar1">Some content 1</textarea> 
 
<button class="clipboard-btn1" data-clipboard-action="copy" data-clipboard-target="#bar1"> 
 
    Copy to clipboard 
 
</button> 
 
<br> 
 
<textarea id="bar2">Some content 2</textarea> 
 
<button class="clipboard-btn2" data-clipboard-action="copy" data-clipboard-target="#bar2"> 
 
    Copy to clipboard 
 
</button> 
 
<br> 
 
<textarea id="bar3">Some content 3</textarea> 
 
<button class="clipboard-btn3" data-clipboard-action="copy" data-clipboard-target="#bar3"> 
 
    Copy to clipboard 
 
</button> 
 
<br>

Answer 2

Vous ne pouvez pas copier plusieurs éléments cibles à la fois. Cependant, vous pouvez utiliser des options plus avancées dans le imperative api pour que:

new Clipboard('.clipboard-btn', { 
    text: function(trigger) { 
     var a = document.querySelector('#a').value; 
     var b = document.querySelector('#b').value; 
     return a + b; 
    } 
});