重构link_to_function的最佳UJS方式是什么?

我有一个针对我的棒球选秀爱好项目的以下界面,让球队老板建立一套标准来对球员进行排名:

ranking_formula

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

在Rails 2和Rails 3(带有原型助手)中 – 我通过以下方式做到了这一点:

“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,但我不确定最好的方法 – 主要是因为涉及的循环。 我可以做这个:

 
  • 'attributeappend', :onclick => "$('#rankingattributes').append('#{escape_javascript(render(:partial => 'ranking_attribute',:locals => {:attributename => attributename}))}')") %>

这基本上只是替换link_to_function。 但有更好的方法吗? ujs的方式会让我这样做:

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

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

必须有一个更好的方法(我相信有一个更好的界面,建议欢迎!)。

我在视图中这样做:

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

然后js的匹配位将是

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

这假设您在页面上有一个带有id template的不可见元素,类似于

 
Attribute: toReplace ...

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

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