【问题标题】:What's the best UJS way of refactoring link_to_function?重构link_to_function的最佳UJS方式是什么?
【发布时间】:2012-01-26 21:24:26
【问题描述】:

我有一个面向棒球选秀的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 语法错误的脆弱级联,两者其中的调试令人沮丧。

但必须有更好的方法(我确信有更好的界面,欢迎提出建议!)。

【问题讨论】:

  • 您找到解决方案了吗?
  • 不,我并没有真正深入研究它,这个骇人听闻的东西足以达到这个目的。

标签: jquery ruby-on-rails ruby-on-rails-3.1 ujs


【解决方案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 的所有实例替换为它从链接中提取的文本,并将其附加到 id 为 ranking attributes 的元素。

如果您希望链接中的文本与以这种方式替换的实际值不同,您可以在链接上添加具有正确值的 data- 属性。

【讨论】:

  • 谢谢。我不确定我是否会这样做,但模板中提到的内容让我看到了mustache.js 之类的东西。
猜你喜欢
  • 1970-01-01
  • 2022-01-19
  • 2015-02-28
  • 1970-01-01
  • 2010-10-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多