【问题标题】:Rails / Bootstrap / HAML - How to convert this code to display flash messages to HAML?Rails / Bootstrap / HAML - 如何将此代码转换为将 Flash 消息显示为 HAML?
【发布时间】:2015-09-14 16:22:20
【问题描述】:

我想将以下代码转换为 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">&times;</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-on-rails twitter-bootstrap haml


    【解决方案1】:

    如果您想将多行 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 } &times;
        %span.sr-only Close
      = content
    

    【讨论】:

    • 经验法则,如果您的视图中有逻辑,请将它们移至助手。
    • 非常感谢!从这里开始,我将使用用户助手。这个代码是我在网上找到的。我知道它很丑,但它是唯一有效的。现在这个新代码,加上一些编辑,运行良好。
    猜你喜欢
    • 2015-09-10
    • 1970-01-01
    • 2014-12-12
    • 2023-03-09
    • 1970-01-01
    • 2019-05-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多