Rails 有条件 CSS 在视图助手中

Question

我有一个简单的 rails 应用程序，我正在尝试编写一个执行以下操作的视图助手。

比较两个值。如果 current_month 金额大于预测金额，则将文本设为绿色。如果 current_month 金额小于预测金额，则将文本设为红色。

我编写了这个简单的帮助程序来将文本附加到 rails 方法的输出，但我不确定如何将 CSS/styling 注入其中。

def target_hit(forecast, current)
  (if current.amount > forecast.amount
    number_to_currency(current.amount.to_s) + " Yay"
  elsif current.amount < forecast.amount
    number_to_currency(current.amount.to_s) + " No dice"
  end).html_safe
end

我在后端方面相当精通，但是在涉及到前端方面的东西时，我却犯了很多错误。任何帮助将不胜感激。

示例查看代码

<p class='total'>Current: <%= target_hit(@forecast, @current) %></p>

Answer 1

rails 助手 content_tag http://apidock.com/rails/ActionView/Helpers/TagHelper/content_tag 很有用，意味着您不必使用 html_safe。我尝试将所有逻辑从视图移至助手，以使视图易于阅读，例如

def target_hit(current_amt, forecast_amt)
  content_tag(:p, "#{number_to_currency(current_amt.to_s)} target_content(current_amt, forecast_amt)", class: "total #{target_class(current_amt, forecast_amt)}")
end

def target_content(current_amt, forecast_amt)
  forecast_reached?(current_amt, forecast_amt) ? "Yay" : "No dice"
end

def target_class(current_amt, forecast_amt)
  forecast_reached?(current_amt, forecast_amt) ? "green" : "red"
end

def forecast_reached?(current_amt, forecast_amt)
  current_amt >= forecast_amt
end

在视图中，您只需调用辅助方法

<%= target_hit(@current.amount, @forecast.amount) %>

Rails 有条件 CSS 在视图助手中

Rails conditional CSS in view helper

css

ruby-on-rails-4

helper