Rails / Bootstrap / HAML - 如何将此代码转换为 HAML 以显示即时消息?
Rails / Bootstrap / HAML - How to convert this code to display flash messages to HAML?
我想将以下代码转换为 HAML 以处理 Rails 4.2.2 应用程序中 Bootstrap 的警报消息。我手动尝试过,使用 html2haml 和在线转换器,但我得到的代码从来没有用过。
代码:
<div class="alert
<%=
case type.to_sym
when :alert, :danger, :error, :validation_errors
'alert-danger'
when :warning, :todo
'alert-warning'
when :notice, :success
'alert-success'
else
'alert-info'
end
%>
alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<%= content %>
</div>
这是我从转换器那里得到的:
.alert.case.when.:validation_errors.when.:todo.when.:success.else.end.alert-dismissible{:class => "<haml_loud> type.to_sym :alert, :danger, :error, 'alert-danger' :warning, 'alert-warning' :notice, 'alert-success' 'alert-info' </haml_loud>", :role => "alert"}
%button.close{"data-dismiss" => "alert", :type => "button"}
%span{"aria-hidden" => "true"} ×
%span.sr-only Close
= content
我知道它很丑陋,但它是我发现的唯一可以与 Bootstrap 3.5.5 开箱即用的代码。如果有人对使用 HAML 的新代码有任何建议,我很乐意听取。
如果您想将多行 Ruby 代码放入 HTML 元素的属性中,HAML 并不是很好。无论如何,这被认为是一种不好的做法,因为它会使您的视图复杂化,所以我会改用助手来简化视图。例如,您可以创建一个 helpers/alert_helper.rb
文件。
helpers/alert_helper.rb
module AlertHelper
def build_alert_classes(alert_type)
classes = 'alert alert-dismissable '
case alert_type.to_sym
when :alert, :danger, :error, :validation_errors
classes += 'alert-danger'
when :warning, :todo
classes += 'alert-warning'
when :notice, :success
classes += 'alert-success'
else
classes += 'alert-info'
end
end
end
那么在你看来,就变成了这样:
查看
%div{ class: build_alert_classes(type), role: "alert" }
%button.close{ type: "button", "data-dismiss" => "alert" }
%span{ "aria-hidden" => true } ×
%span.sr-only Close
= content
我想将以下代码转换为 HAML 以处理 Rails 4.2.2 应用程序中 Bootstrap 的警报消息。我手动尝试过,使用 html2haml 和在线转换器,但我得到的代码从来没有用过。
代码:
<div class="alert
<%=
case type.to_sym
when :alert, :danger, :error, :validation_errors
'alert-danger'
when :warning, :todo
'alert-warning'
when :notice, :success
'alert-success'
else
'alert-info'
end
%>
alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<%= content %>
</div>
这是我从转换器那里得到的:
.alert.case.when.:validation_errors.when.:todo.when.:success.else.end.alert-dismissible{:class => "<haml_loud> type.to_sym :alert, :danger, :error, 'alert-danger' :warning, 'alert-warning' :notice, 'alert-success' 'alert-info' </haml_loud>", :role => "alert"}
%button.close{"data-dismiss" => "alert", :type => "button"}
%span{"aria-hidden" => "true"} ×
%span.sr-only Close
= content
我知道它很丑陋,但它是我发现的唯一可以与 Bootstrap 3.5.5 开箱即用的代码。如果有人对使用 HAML 的新代码有任何建议,我很乐意听取。
HAML 并不是很好。无论如何,这被认为是一种不好的做法,因为它会使您的视图复杂化,所以我会改用助手来简化视图。例如,您可以创建一个 helpers/alert_helper.rb
文件。
helpers/alert_helper.rb
module AlertHelper
def build_alert_classes(alert_type)
classes = 'alert alert-dismissable '
case alert_type.to_sym
when :alert, :danger, :error, :validation_errors
classes += 'alert-danger'
when :warning, :todo
classes += 'alert-warning'
when :notice, :success
classes += 'alert-success'
else
classes += 'alert-info'
end
end
end
那么在你看来,就变成了这样:
查看
%div{ class: build_alert_classes(type), role: "alert" }
%button.close{ type: "button", "data-dismiss" => "alert" }
%span{ "aria-hidden" => true } ×
%span.sr-only Close
= content