重构link_to_function的最佳UJS方法是什么？

Question

我有一个面向棒球选项的hobby project以下界面，让球队老板建立一套标准来对球员进行排名：

单击属性会将该属性添加到列表中，为其赋予重要性因子和排序方向。

在Rails 2和Rails 3（带有原型助手）中 - 我通过以下方式做到了这一点：

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

其中“add_ranking_attribute_link（attributename）”是：

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}))}')
});

但是由于属性名称处理，这在循环外部不起作用。老实说，我在erb和javascript中混淆了一点混乱 - 并且不知道将一个传递属性名作为一个参数传递给javascript函数的好方法，以便在没有脆弱的级联调试erb和javascript语法错误的情况下插入到渲染部分中。其中的调试令人沮丧。

必须有一个更好的方法（我相信有一个更好的界面，建议欢迎！）。

Answer 1

我在视图中这样做：

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

然后js的匹配位将是

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

这假设您在页面上有一个ID为template的隐藏元素，类似于

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

</div>

当您点击链接时，javascript会触发。它从模板内部抓取html，并将其从链接中提取的文本替换为toReplace的所有实例，并将其附加到标识为ranking attributes的元素。

如果您希望链接中的文本与以这种方式替换的实际值不同，您可以使用正确的值在链接上添加数据属性。