深层嵌套的content_tag,concat和rails 3

Question

我很沮丧使用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" %>

而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的第二个参数

Answer 1

你不需要使用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助手来构建整个视图并不是他们的预期目的.他们应该在动态的地方帮助你,静态html在ERB模板中做得更好.