twitter-bootstrap 深度嵌套的 content_tag、concat 和 rails 3

deeply nested content_tag, concat and rails 3

提问by Michael K Madison

I'm frustrated using Rails 3.2 and making a helper for Bootstrap modals. I don't understand when you need concat versus when you don't sometimes I end up with tags missing and sometimes I end up with a hash with all the options between before and ending tags. When I use concat on any content-tag with a do-end all hell breaks loose. All I want to do is replicate this html:

我对使用 Rails 3.2 并为 Bootstrap 模态制作助手感到沮丧。我不明白什么时候需要 concat 与什么时候不需要 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>

I cannot for the life of me get the button in the h4 in the modal header to work out right. Neither can I get the page header to appear in the modal body.

我一生都无法在模态标题中的 h4 中找到正确的按钮。我也不能让页面标题出现在模态正文中。

My helper looks like this:

我的助手看起来像这样：

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 

end

结尾

And the link looks like this:

链接如下所示：

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

And the modal html looks like this:

模态 html 如下所示：

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

The output is this:

输出是这样的：

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

which looks like this in the page source:

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

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

Update:

更新：

changing modal_header to this works:

将 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

But this doesn't:

但这不会：

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

which begs the question, wzup with concat? and am i missing something -- I also tried empty quotes as the second argument to the button content_tag

这引出了一个问题，wzup with concat？我是否遗漏了什么——我还尝试将空引号作为按钮 content_tag 的第二个参数

回答by Simon Perepelitsa

You don't need to ever use concat.

你永远不需要使用concat.

Each Rails helper returns a string with some html in it:

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

tag(:br) # "<br>"

So your simplest helper method would be this:

所以你最简单的辅助方法是这样的：

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

If you have multiple strings of html just sum them up:

如果您有多个 html 字符串，只需将它们相加即可：

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

Note that you can't just call them as they don't modify the view

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

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

For blocks the same rules apply:

对于块，适用相同的规则：

# "<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

As a side note, using just Rails helpers to construct the whole view isn't really their intended purpose. They are supposed to helpyou in dynamic places, static html is better done in ERB templates.

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