Question

我在屏幕顶部呈现一个部分警报栏，向用户显示成功/失败/通知Flash消息。

我终于让它适用于大多数情况，但代码本身对于一些部分是重复的，我不确定如何更有效地分割它，因为我对所有这些都相对较新。我的目标是尽可能不重复自己，或者至少尽量减少重复的次数。

例如，有没有办法将一些javascript放入可重用的部分或辅助函数中？还有其他明显的方法可以减少重复这些代码吗？

我对Rails / Ruby感到不舒服，无法理解如何改进代码，因此非常感谢您提供的任何提示！

/ top alert area
#topAlertBar.shadow_medium.soft-hidden

- if flash.empty? && !current_user.confirmed?
  - # User has yet to confirm their account
  - # and there AREN'T any flash messages to show

  #alertBarOffset.colordark.soft-hidden
    / placeholder for alert bar offset

  :javascript
    // Set the flash box content
    $('#topAlertBar').html('Please confirm your account by following the instructions sent to #{current_user.email}.  To resend your confirmation email, #{escape_javascript(link_to("click here", user_resend_confirmation_path(current_user), :class => "inlinelink", :method => :post, :remote => true))} #{escape_javascript(image_tag("ajaxOrange.gif", :class => "soft-hidden mls mbs"))}.');

    // Slides down the top alert bar after page load
    $('#topAlertBar, #alertBarOffset').delay(250).slideDown("fast");

    // Shows & hides AJAX loading GIF when necessary
    $('#topAlertBar a').click(function() {
      $(document).bind('ajaxSend', function(e, request, options) {
        $("#topAlertBar img").show();
      });
      $(document).bind('ajaxComplete', function(e, request, options) {
        $(document).unbind('ajaxSend', 'ajaxComplete');
        $("#topAlertBar img").hide();
      });
    });

- elsif !flash.empty? && !current_user.confirmed?
  - # User has yet to confirm their account
  - # and there ARE flash messages to show

  #alertBarOffset.colordark.soft-hidden
    / placeholder for alert bar offset

  - [:error, :success, :notice].each do |key| 
    - unless flash[key].blank?
      - @msg = flash[key]
      - @key = key

  :javascript
    // Set the flash box content
    var $that = $('#topAlertBar');
    $that.html('#{@msg}').addClass('#{@key}').delay(250).slideDown("fast", function() {
      $(this).delay(2000).slideUp("fast", function () {
        // Remove any CSS modifiers
        $that.removeClass('#{@key}');

        // Set the flash box content
        $('#topAlertBar').html('Please confirm your account by following the instructions sent to #{current_user.email}.  To resend your confirmation email, #{escape_javascript(link_to("click here", user_resend_confirmation_path(current_user), :class => "inlinelink", :method => :post, :remote => true))} #{escape_javascript(image_tag("ajaxOrange.gif", :class => "soft-hidden mls mbs"))}.');

        // Slides down the top alert bar after page load
        $('#topAlertBar, #alertBarOffset').slideDown("fast");

        // Shows & hides AJAX loading GIF when necessary
        $('#topAlertBar a').click(function() {
          $(document).bind('ajaxSend', function(e, request, options) {
            $("#topAlertBar img").show();
          });
          $(document).bind('ajaxComplete', function(e, request, options) {
            $(document).unbind('ajaxSend', 'ajaxComplete');
            $("#topAlertBar img").hide();
          });
        });

      });
    });


- elsif !flash.empty?
  - # User is confirmed
  - # and there ARE flash messages to show

  - [:error, :success, :notice].each do |key| 
    - unless flash[key].blank?
      - @msg = flash[key]
      - @key = key

  :javascript
    // Set the flash box content
    var $that = $('#topAlertBar');
    $that.html('#{@msg}').addClass('#{@key}').delay(250).slideDown("fast", function() {
      $(this).delay(2000).slideUp("fast");
    });

Answer 1

为什么要打扰用户确认的所有不同状态？如果用户未得到确认，请让您的application_controller设置闪光警报。

其次 - 将所有jquery移动到application.js并在每个页面上运行它 - 如果它存在，它应该向下滑动你的内容，否则什么也不做。

最后，抓住以下闪存助手：http://snippets.dzone.com/posts/show/6440，然后在布局中调用它，如

%head
  %titile
  =javascript_include_tag :all
  =yield(:header)
%body
  =display_flash
  =yield

Answer 2

我最终采取了与Jesse推荐的不同的方法，但他仍然帮助我思考如何重构代码。这是最终的结果，就像我可以得到它而没有完全改变我已经实现它的方式。

希望这将有助于将来偶然发现这个问题的其他人。

在我的ApplicationHelper 中（这与原始问题稍有不同，因此它现在适用于我的验证错误以及常规Flash消息）

  def display_flash_messages
    if !flash.empty?
      [:error, :success, :notice, :warning].each do |key| 
        unless flash[key].blank?
          @flash_key = key
          if flash[key].kind_of?(Array) && flash[key].size > 1
            @flash_msg = flash[key].join(' & ')
          elsif flash[key].kind_of?(Array) && flash[key].size == 1
            @flash_msg = flash[key].first
          elsif flash[key].kind_of?(String)
            @flash_msg = flash[key]
          end
        end
      end
    end
    return
  end

在我的主要布局文件中，我只是这样做：

  %body
    - if signed_in?
      = render 'shared/top_alert_bar'

位于顶部提醒栏文件

= display_flash_messages

/ top alert area
#topAlertBar.shadow_medium.soft-hidden
- if !current_user.confirmed?
  #alertBarOffset.colordark.soft-hidden
    / placeholder for alert bar offset

- if flash.empty? && !current_user.confirmed?
  - # User has yet to confirm their account
  - # and there AREN'T any flash messages to show

  :javascript
    #{render('shared/js/confirm_user')}

- elsif !flash.empty?

  :javascript
    // Set the flash box content
    var $that = $('#topAlertBar');
    $that.html('#{@flash_msg}').addClass('#{@flash_key}').delay(250).slideDown("fast", function() {
      $(this).delay(4000).slideUp("fast", function () {
        // Remove any CSS modifiers
        $that.removeClass('#{@flash_key}');

        #{!current_user.confirmed? ? render('shared/js/confirm_user') : ""}

      });
    });

在confirm_user部分

中

:plain
  $('#topAlertBar').html('Please confirm your account by following the instructions sent to #{current_user.email}.  To resend your confirmation email, #{escape_javascript(link_to('click here', user_resend_confirmation_path(current_user), :class => 'inlinelink', :method => :post, :remote => true))}. #{escape_javascript(image_tag('ajaxOrange.gif', :class => 'soft-hidden mls mbs'))}');

  $('#topAlertBar, #alertBarOffset').delay(250).slideDown('fast');

最后，我将其移至我的主要js文件

/* ******************************** */
/* Top Alert Bar for Flash Messages */
/* ******************************** */
// Description: Shows & hides AJAX loading GIF when necessary
$('#topAlertBar a').click(function() {
  $(document).bind('ajaxSend', function(e, request, options) {
    $("#topAlertBar img").show();
  });
  $(document).bind('ajaxComplete', function(e, request, options) {
    $("#topAlertBar img").hide();
    $(document).unbind('ajaxSend', 'ajaxComplete');
  });

}）;

干掉一些Rails / HAML / jQuery视图代码

2 个答案: