link_to_functionのリファクタリングに最適なUJSの方法は何ですか？

Question

私はチームの所有者が上の選手をランク付けする基準のセットを構築することができます私のhobby projectを指向野球ドラフトのための次のインタフェースがあります属性をクリック

リストにその属性を追加しますそれに重要な要素と並べ替えの方向を与えます。レール2とRails 3では

（プロトタイプヘルパー付き） - 私は、次のを持っていることによってこれをした：

"add_ranking_attribute_link（attributeNameが）" である

<div class="rankingvaluecloud"> 
    <ul> 
     <% @rankingattributes.each do |attributename| %> 
     <li><%= add_ranking_attribute_link(attributename) %></li> 
     <% end %> 
    </ul> 
</div> 
<div id="rankingattributes"> 
</div> 

：

def add_ranking_attribute_link(attributename) 
    link_to_function attributename do |page| 
    page.insert_html :bottom, :rankingattributes, :partial => 'ranking_attribute', :locals => {:attributename => attributename } 
    end 
end 

私は」これをjqueryに変換してみましたが、主にループが関与しているため、これを行う最良の方法はわかりません。私はこれをすることができます：

<div class="rankingvaluecloud"> 
    <ul> 
     <% @rankingattributes.each do |attributename| %> 
     <li><%= link_to(attributename,'#',:class => 'attributeappend', :onclick => "$('#rankingattributes').append('#{escape_javascript(render(:partial => 'ranking_attribute',:locals => {:attributename => attributename}))}')") %></li> 
     <% end %> 
    </ul> 
</div> 
<div id="rankingattributes"> 
</div> 

これは基本的にlink_to_functionを置き換えています。しかし、より良い方法がありますか？ UJSの方法は、私が何かやっています：

$(".attributeappend).click(function() { 
    $('#rankingattributes').append('#{escape_javascript(render(:partial => 'ranking_attribute',:locals => {:attributename => attributename}))}') 
}); 

をしかし、それは理由attributeNameの処理のループの外では動作しません。私は正直なところ、erbとjavascriptで少し混乱してしまいます。そして、erutenとjavascriptの構文エラーの脆弱なカスケードを使わずに、部分的にレンダリング部分に挿入するjavascript関数のparamとしてattributenameを渡す良い方法を知らないそのうちの1つはデバッグに欲求不満です。

もっと良い方法があるはずです（これについては、より良いインターフェースがあると思います。

Answer 1

私はビューでこれを行うだろう：

link_to 'attributename','#',:class => 'attributeappend' 

をして、JSのマッチングビットは、これはあなたがIDを持つページ上の見えない要素を持っていることを前提とし

$(".attributeappend").click(function() { 
    $('#rankingattributes').append($('#template').html().replace(/toReplace/g, $(this).text()); 
    return false; 
}); 

だろうtemplate 、何かのように

<div id="template"> 
Attribute: toReplace 
... 

</div> 

あなたがリンクをクリックすると、JavaScriptが発生します。テンプレート内からhtmlを取得し、toReplaceのすべてのインスタンスを、リンクから抽出したテキストで置き換えて、id：ranking attributesの要素に追加します。

リンクのテキストをこのように置き換えられる実際の値と異なるようにするには、正しい値でリンクにデータ属性を追加することができます。