我有以下面向棒球选秀的界面 hobby project我的想法是让团队所有者建立一套标准来对玩家进行排名:
单击属性会将该属性添加到列表中,并为其指定重要性因素和排序方向。
在 Rails 2 和 Rails 3 中(使用原型(prototype)助手) - 我通过以下方式做到了这一点:
<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 中混合有点迷失 - 并且不知道将 attributename 作为参数传递给 javascript 函数以插入回渲染部分的好方法,而不需要调试 erb 和 javascript 语法错误的脆弱级联,两者其中调试起来很令人沮丧。
不过必须有更好的方法(并且我确信有更好的界面,欢迎提出建议!)。
最佳答案
我会在 View 中执行此操作:
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 实例替换为从链接中提取的文本,并将其附加到具有 id 排名属性
的元素。
如果您希望链接中的文本与以这种方式替换的实际值不同,您可以在链接上添加具有正确值的数据属性。
关于jquery - 重构 link_to_function 的最佳 UJS 方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8617384/