rails 3 干不显眼的javascript答案

【问题标题】：rails 3 dry unobtrusive javascriptrails 3 干不显眼的javascript
【发布时间】：2011-06-12 02:41:11
【问题描述】：

我将所有内容都更改为不显眼的 javascript，因为我认为它使调试等变得更加容易。

我有类似的东西：


$(document).ready(function(){

  $('#photos_link').click(function()
  {
    select_tab('main', 'photos', $(this));
  });

  $('#dealership_link').click(function()
  {
    select_tab('main', 'dealership', $(this));
  });

  $('#dealership').hide();
});

如您所见，我有 2 个非常相似的构造，我想把它们擦干，有什么想法吗？

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 dry unobtrusive-javascript

【解决方案1】：

这里有两个纯 JS 重构：

$(document).ready(function(){
  $('#photos_link, #dealership_link').click(function(){
    select_tab('main', $(this).attr('id').match(/(.*)_link/)[1], $(this));
  });

  $('#dealership').hide();
});

和

$(document).ready(function(){
  $.each(['photos', 'dealership'], function(key, value) { 
    $('#' + value + '_link').click(function(){
      select_tab('main', value, $(this));
    });
  });

  $('#dealership').hide();
});

我个人更喜欢前者。

【讨论】：

感谢第二个看起来更好，它确实重构了一些代码。

【解决方案2】：

在 ApplicationHelper（或适当的帮助器）中创建帮助器方法：

def select_tab_click_event(tab)
  js =<<JS
    $('##{tab}_link').click(function()
    {
      select_tab('main', '#{tab}', $(this));
    });
JS
  js.html_safe
end

然后，从你的角度调用它：

$(document).ready(function(){
  <%= select_tab_click_event('photos') %>
  <%= select_tab_click_event('dealership') %>
}

【讨论】：

就不显眼而言，这与保持表示层与页面结构分离并允许您的功能在没有 JavaScript 的情况下优雅降级有关。由于您的问题询问如何干燥您的代码，因此我专注于消除重复，同时将表示层与其他任何东西分开。助手旨在帮助生成视图，我使用助手来做到这一点，同时还消除了代码中的重复。助手并不意味着包含业务逻辑。这属于模型。