深层嵌套的content_tag,concat和rails 3

时间:2013-04-09 06:12:06

标签: ruby-on-rails twitter-bootstrap ruby-on-rails-3.2 helper

我很沮丧地使用Rails 3.2并为Bootstrap模式制作帮助器。我不明白什么时候你需要concat而不是你什么时候我不会最终丢失标签,有时我最终会得到一个哈希,其中包含之前和结束标签之间的所有选项。当我在任何带有do-end的内容标签上使用concat时,所有的地狱都会崩溃。我想做的就是复制这个html:

<div id="stupid_modal" class="modal hide fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fontello-icon-cancel-1"></i></button>
        <h4>Modal header</h4>
    </div>
    <div class="modal-body">
        <div class="page-header">
            <p>Test header 1 2 3.</p>
        </div>
        <div class="row-fluid">

           content here... blah blah

        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn">Close</button>
        <button type="button" class="btn btn-green">Save changes</button>
    </div>
</div>

我无法为我的生活获取模态标题中的h4中的按钮来正确运行。我也不能让页眉出现在模态体中。

我的助手看起来像这样:

module ModalHelper
def modal(css_id, header_text, hidden = true, options = {},&block)
    class_text = "modal"
    class_text += " hide fade" if hidden
    content_tag(:div, :class => 'modal hide fade', :id => css_id, :style => ("display:none;" if hidden)) do 
        concat modal_header(header_text)
        concat modal_body(&block)
        concat modal_footer
    end
end

def modal_button(link_text, href)
    modal_caller link_text, href, :button
end

def modal_link(link_text, href)
    modal_caller link_text, href
end

private

def modal_caller(link_text, href, type = nil)
    options = { :"data-toggle" => "modal" }
    options.merge!({ :class => "btn" }) if type == :button
    link_to link_text, "#" + href, options
end

def modal_header(header_text)
    content_tag(:div, :class => 'modal-header') do
        concat content_tag(:button,(content_tag(:i, :class => 'fontello-icon-cancel-1')),:class => 'close', :"data-dismiss" => 'modal', :"aria-hidden" => 'true')
        concat content_tag(:h4, header_text)
    end
end

def modal_body(page_header = "")
    content_tag(:div, :class => 'modal-body') do
        content_tag(:div, :class => 'page-header') do
            concat content_tag(:p, page_header)
        end
        content_tag(:div, :class => 'row-fluid') do
            yield
        end
    end     
end 

def modal_footer
    content_tag(:div, :class => 'modal-footer') do
        concat content_tag(:button, 'Close', type: "button", :class => 'btn btn-boo', :"data-dismiss" => 'modal')
        concat content_tag(:button, 'Save', type: "button", class: 'btn btn-green')
    end     
end 

链接看起来像这样:

<%= modal_link "New Stupid Modal", "stupid_modal" %>

模态html看起来像这样:

<%= modal('stupid_modal', 'Shouldnt this work?', submit: true, tabindex: '-1') do %>
    <% render 'stupid_modal_partials/stupid_modal' %>
<% end %>

输出是这样的:

<button aria-hidden="true" class="close" data-dismiss="modal"><i>{:class=&gt;&quot;fontello-icon-cancel-1&quot;}</i></button>

在页面源中看起来像这样:

<i>{:class=>"fontello-icon-cancel-1"}</i>

更新

将modal_header更改为:

def modal_header(header_text)
    content_tag(:div, :class => 'modal-header') do
        concat content_tag(:button,(content_tag(:i, "",:class => 'fontello-icon-cancel-1')),:class => 'close', :"data-dismiss" => 'modal', :"aria-hidden" => 'true')
        concat content_tag(:h4, header_text)
    end
end

但这不是:

def modal_header(header_text)
    content_tag(:div, :class => 'modal-header') do
        concat content_tag(:button,:class => 'close', :"data-dismiss" => 'modal', :"aria-hidden" => 'true') do
            concat content_tag(:i, "",:class => 'fontello-icon-cancel-1')
        end
        concat content_tag(:h4, header_text)
    end
end

这引出了一个问题,wzup与concat?我错过了什么 - 我也试过空引号作为按钮content_tag的第二个参数

1 个答案:

答案 0 :(得分:11)

您无需使用concat

每个Rails助手都会返回一个包含一些html的字符串:

tag(:br) # "<br>"

所以你最简单的辅助方法就是:

# "<br>"
def br
  tag(:br)
end

如果您有多个html字符串,请加以总结:

# "<button>Close</button><button>Save</button>"
def modal_buttons
  content_tag(:button, "Close") + content_tag(:button, "Save")
end

请注意,您不能只是调用它们,因为它们不会修改视图

# "<button>Save</button>"
def modal_buttons
  content_tag(:button, "Close") # this won't do anything
  content_tag(:button, "Save")
end

对于块,适用相同的规则:

# "<div><button>Close</button><button>Save</button></div>"
def modal_footer
  content_tag(:div) do
    # what block returns will be inside the div
    content_tag(:button, "Close") + content_tag(:button, "Save")
  end
end

def modal_body
  content_tag(:div) do
    modal_header + yield + modal_footer
  end
end

作为旁注,使用Rails助手来构建整个视图并不是他们真正的目的。他们应该在动态的地方帮助你,在ERB模板中更好地完成静态html。