Une chose que je ne comprends pas à propos de javascript discret

Question

J'aime l'idée de séparer les fonctionnalités et cela semble être la voie de l'avenir.

Mais j'ai l'habitude d'intégrer javascript dans des boucles dans un langage embarqué comme Rails ERB ou PHP, où je peux utiliser l'identifiant d'un objet particulier comme référence dans le javascript.

exemple Rails:

<% @comments.each do |comment| %> 
    <div id="comment_<%= comment.id %>"> 
    <%= comment.text %> 
    <% link_to_function "Reply", "$('comment_#{comment.id}').insert(\"#{escape_javascript(render :partial => "_form", :locals => {:comment => comment})}\", {position: 'bottom'});" %> 
    </div> 
<% end %> 

Ce n'est pas la seule fois que je l'ai fini par vouloir utiliser des méthodes Ruby soit à l'intérieur de javascript. Je voudrais peut-être utiliser des constantes ou appeler d'autres méthodes de rubis sur un objet dans une boucle user.enabled? ou user.full_name, ou rendre partials avec ces objets, etc.

Alors comment est-ce censé être accompli si tout le javascript est dans une autre fichier ou en dehors de la boucle? Je comprends que vous pouvez itérer à travers un tas de divs en javascript en utilisant des sélecteurs CSS, mais cela ne me permet pas d'appeler les méthodes ruby ​​sur les objets.

Qu'est-ce qui me manque? Merci!

Answer 1

Je pense qu'il shold être fait avec le paramètre « data-id », comme indiqué dans ce screencast http://railscasts.com/episodes/229-polling-for-changes

Answer 2

Pardonnez-moi pour l'utilisation de jquery, mais le développement web fait vraiment chier sans elle ou d'une bibliothèque similaire

Pour votre première plainte (obtenir le commentaire actuel), javascript this fonctionne très bien pour moi.

onclick="my_function(this);" 

et dans le fichier js

my_function = function(target) { 
    // clicked element passed in 
    // now, let's get comment element by class 
    var comment = $(target).parents('.comment'); 
} 

Quant à la deuxième plainte ... Je ne souvent, mais parfois je besoin inclure des morceaux de données en HTML pour une utilisation par javascript. L'extension de l'exemple précédent:

<div class="comment" comment_id="<%= comment.id %>"></div> 

Et my_function

var comment_id = comment.attr('comment_id'); 

Answer 3

Pour votre exemple particulier que vous avez déjà l'ID de commentaire codé dans le balisage parce que vous définissez l'attribut ID de l'élément div à l'ID de commentaire. Vous pouvez donc bloquer le JavaScript.

Answer 4

Faites de votre script côté client un objet 'options' en tant que paramètre. N'utilisez aucun script côté serveur; Mettez le script dans son propre fichier .js. Ensuite, créez l'objet 'options' avec un script côté serveur qui sort js. Incluez votre script et appelez sa fonction de point d'entrée, en passant votre objet 'options'.

Answer 5

Vous avez juste besoin de plus de connaissances JavaScript pour en voir la puissance, en particulier jQuery.Votre exemple, je résoudrait comme:

<% @comments.each do |comment| %> 
    <div class="comment"> 
    <%= comment.text %> 
    <a href="reply.php?id=<%= comment.id %>" class="reply">Reply</a> 
    </div> 
<% end %> 
<script type="text/javascript"> 
    $('.comment .reply').click(function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    var result = url.match(/\?id=(\d+)([^\d]|$)/); 
    var id = (result && result[1]); 
    if (id) { 
     // do whatever you want to do with the id 
    } 
    }); 
</script> 

Avantages:

(1) Vous n'avez pas javascript dans tous les sens

(2) Fonctionne sans javascript