title: What's the best UJS way of refactoring link_to_function?
body: <p>I have the following interface for a baseball-draft oriented <a href="https://github.com/jasonadamyoung/busterdraft" rel="nofollow noreferrer">hobby project</a> of mine that lets a team owner build a set of criteria to rank players on:</p>
  
  <p><img src="https://i.stack.imgur.com/nW8pi.jpg" alt="ranking_formula"></p>
  
  <p>Clicking the attributes will add that attribute to the list, give it an importance factor and a sort direction.</p>
  
  <p>In Rails 2 and Rails 3 (with the prototype helpers) - I did this by having the following:</p>
  
  <pre><code>&lt;div class="rankingvaluecloud"&gt;
    &lt;ul&gt; 
        &lt;% @rankingattributes.each do |attributename| %&gt;
          &lt;li&gt;&lt;%= add_ranking_attribute_link(attributename) %&gt;&lt;/li&gt;
        &lt;% end %&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="rankingattributes"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where "add_ranking_attribute_link(attributename)" is:</p>
  
  <pre><code>def add_ranking_attribute_link(attributename) 
    link_to_function attributename do |page| 
      page.insert_html :bottom, :rankingattributes, :partial =&gt; 'ranking_attribute', :locals =&gt; {:attributename =&gt; attributename }
    end
  end
  </code></pre>
  
  <p>I'm converting this to jquery, but I'm not sure the best way to do it - mainly because of the loop involved. I can do this:</p>
  
  <pre><code>&lt;div class="rankingvaluecloud"&gt;
    &lt;ul&gt; 
        &lt;% @rankingattributes.each do |attributename| %&gt;
          &lt;li&gt;&lt;%= link_to(attributename,'#',:class =&gt; 'attributeappend', :onclick =&gt; "$('#rankingattributes').append('#{escape_javascript(render(:partial =&gt; 'ranking_attribute',:locals =&gt; {:attributename =&gt; attributename}))}')") %&gt;&lt;/li&gt;
        &lt;% end %&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="rankingattributes"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which is basically just replacing the link_to_function.  But is there a better way?  The ujs way would have me doing something like:</p>
  
  <pre><code>$(".attributeappend).click(function() {
    $('#rankingattributes').append('#{escape_javascript(render(:partial =&gt; 'ranking_attribute',:locals =&gt; {:attributename =&gt; attributename}))}')
  });
  </code></pre>
  
  <p>But that doesn't work out outside the loop because of the attributename handling. I honestly get a bit lost mixing in erb and javascript - and don't know a good way of passing attributename as a param to the javascript function to insert back into the render partial without a fragile cascade of debugging erb and javascript syntax errors, both of which are frustrating to debug.</p>
  
  <p>There has to be a better way though (and I'm sure there's a better interface for this, suggestions welcome!).</p>