我应该如何处理一个反复使用的代码块，其中包括ruby & CSS？

Question

很长一段时间以来，我忽视了红宝石铁轨的干燥原理。我在不同的视图文件中反复使用相同的代码块：

<div class="challenge-accomplished-date-banner">
  <% if @correct_user %>
    <%= challenge.notes.count.to_s.rjust(2, "0") %>
  <% else %>
    <%= challenge.notes.publish.count.to_s.rjust(2, "0") %>
  <% end %>
</div>
<% if challenge.categorization == "adventure" %>
  <%= link_to categorization_path(categorization: :adventure) do %>
    <span class="glyphicon glyphicon-picture", id="challenge-flag"></span>
  <% end %>
<% elsif challenge.categorization == "health" %>
  <%= link_to categorization_path(categorization: :health) do %>   
    <span class="glyphicon glyphicon-heart", id="challenge-flag"></span>
  <% end %>            
<% elsif challenge.categorization == "work" %>
  <%= link_to categorization_path(categorization: :work) do %>    
    <span class="glyphicon glyphicon-briefcase", id="challenge-flag"></span>
  <% end %>
<% elsif challenge.categorization == "gift" %>
  <%= link_to categorization_path(categorization: :gift) do %>    
    <span class="glyphicon glyphicon-tree-deciduous", id="challenge-flag"></span>
  <% end %>
<% else %>
  <%= link_to categorization_path(categorization: :wacky) do %>    
    <span class="glyphicon glyphicon-glass", id="challenge-flag"></span>
  <% end %>
<% end %>
<% if challenge.duels.present? && challenge.duels.last.duelers.order(id: :asc).last.accept =! false %>
  <span class="glyphicon glyphicon-tower", id="challenge-flag"></span>
<% elsif challenge.conceal == true %>
  <span class="glyphicon glyphicon-eye-close", id="challenge-flag"></span>
<% else %>
  <span class="glyphicon glyphicon-eye-open", id="challenge-flag"></span>      
<% end %>

不知道该怎么办？我把它放进去..。

module ApplicationHelper
  def banner
    # See Above Code Chunk
  end
end

但它不适用于CSS？是否有一种方式允许CSS中的帮助？或者，我是否将这段代码放在模型中的其他地方，但随后遇到了同样的CSS问题？谢谢!

Answer 1

创建CATEGORIES常量

CATEGORIES = {
  adventure: 'glyphicon-picture',
  health:    'glyphicon-heart',
  work:      'glyphicon-briefcase',
  gift:      'glyphicon-tree-deciduous'
}

CATEGORIES.default = 'glyphicon-glass'

创建部分

_flag.html.erb

<span class="glyphicon <%= class_name %>", id="challenge-flag"></span>

_link.html.erb

<%= link_to categorization_path(categorization: category) do %>    
  <%= render 'flag', class_name: class_name %>
<% end %>

并使用它们

<% category = challenge.categorization %>
<% class_name = CATEGORIES[category.to_sym] %>

<%= render 'link', class_name: class_name, category: category %>

Answer 2

您可以在助手上定义以下方法：

def challenge_link(category)
  icon = case category
  when 'adventure' then 'picture'
  when 'health' then 'heart'
  when 'work' then 'briefcase'
  when 'gift' then 'tree-deciduous'
  else
    'glass'
  end

  link_to(categorization_path(categorization: category.to_sym)) do
    content_tag(:span, "", class: "glyphicon glyphicon-#{ icon }", id: "challenge-flag")
  end
end

然后像这样从视图中调用它：

<%= challenge_link('adventure') %>

关于css，只需确保challenge-accomplished-date-banner类足够通用，以便您可以在应用程序的几个区域重用它。

如果您想更进一步，可以考虑在控制器上的@challenge_notes和@challenge_flag上定义before_action，并在视图中使用以下代码：

<div class="challenge-accomplished-date-banner">
  <%= @challenge_notes %>
</div>

<%= challenge_link('adventure') %>

<span class="glyphicon glyphicon-<%= @challenge_icon %>", id="challenge-flag"></span>