3

我是 Rails 新手，在我目前的项目中，我使用的是 Twitter 的Bootstrap。Bootstrap 的弹出框很漂亮，我打算广泛使用它们，所以我想为弹出框编写一个视图助手。

这是弹出框的标准 html 代码：

<div id="modal-from-dom" class="modal hide fade">
  <div class="modal-header">
    <a href="#" class="close">&times;</a>
    /* popover header's code here */
  </div>
  <div class="modal-body">
    /* popover body's code here */
  </div>
  <div class="modal-footer">
    /* popover footer's code here */
  </div>
  <% end %>
</div>
/* button to show the popover */

这是我的辅助功能：

def render_popup(before,id ,button ,header, body, footer, after)
result = before.html_safe
result += '<div id="'.html_safe
result += id.html_safe
result += '" class="modal hide fade">'.html_safe
result += '<div class="modal-header">'.html_safe
result += '<a href="#" class="close">&times;</a>'.html_safe
result += header.html_safe
result += '</div>'.html_safe
result += '<div class="modal-body">'.html_safe
result += body.html_safe
result += '</div>'.html_safe
result += '<div class="modal-footer">'.html_safe
result += footer.html_safe
result += '</div>'.html_safe
result += '</div>'.html_safe
result += after.html_safe
result += '<button data-controls-modal="'.html_safe
result += id.html_safe
result += '" data-backdrop="true" data-keyboard="true" class="btn primary">'.html_safe
result += button.html_safe
result += '</button>'.html_safe
return result.html_safe
end

我知道这个函数很丑，但我还没有找到更好的方法来编写它：/也许有一些块？

最后是我认为调用这个助手的代码

<% before = form_tag url_for(:controller => "refunds" , :action => "create"), :method => :post %>
<% header = '<h3>Remboursement</h3>'%>
<% body = capture do %>
     <p>
         <p style="margin-top:15px"><b>Montant : (€)</b></p>
         <%= text_field_tag :amount, nil, :placeholder => "ex : 123.45", :class => "span3" %>
         <p style="margin-top:15px"><b>Destination</b></p>
         <%= select_tag :user_id, options_for_select(@users_select), :class => "span3" %>
         <p><br /></p>
         <%= hidden_field_tag :current_user_id, @currentUser.id %>
      </p>
<% end %>
<% footer = submit_tag "Rembourser", :class => "btn primary", :id =>"Rembourser" %>
<% after = "</form>" %>

<div style="margin-top:30px;text-align:center">
  <%= render_popup (before,'refund', '+ Rembourser', header, body, footer, after)%>
</div>

如您所见，我在弹出框上拆分了一个表单。表单的字段在正文中，提交按钮在页脚中。弹出框显示正确，但提交按钮不起作用（它在没有助手的情况下工作）。

如何正确编写辅助函数并处理恶意表单问题？

更新 1

基于 nathanvda 的回答和 clyfe 的评论，我编辑了我的助手并创建了一个部分。
这是部分的代码：

<%= before %>
<div id="<%= popover_id %>" class="modal hide fade">
  <div class="modal-header">
    <a href="#" class="close">&times;</a>
    <%= header%>
  </div>
  <div class="modal-body">
    <%= body %>
  </div>
  <div class="modal-footer">
    <%= footer %>
  </div>
</div>
<%= after %>
<button data-controls-modal="<%= popover_id %>" data-backdrop="true" data-keyboard="true"   class="btn primary">
    <%= button %>
</button>

和辅助方法：

def render_popup(before,id ,button ,header, body, footer, after)
render :partial => 'shared/popover', 
       :locals => { :popover_id => id, 
                    :header => header.html_safe,
                    :body => body, 
                    :footer => footer.html_safe,
                    :button => button,
                    :before => before, 
                    :after => after.html_safe}
end

视图的代码不会改变。
它更干净并且表单显示正确，但提交按钮不能更好地工作（当我点击它时没有发生任何事情）。有什么建议吗？

更新 2

通过将生成的 html 代码与帮助程序进行比较，没有它，我发现了提交问题。form_tag不是在正确的地方。
使用视图中的此代码，它可以工作：

<% header = '<h3>Remboursement</h3>'%>
<% body = capture do %>
  <p>
    <%= form_tag url_for(:controller => "refunds" , :action => "create"), :method => :post %>
    <p style="margin-top:15px"><b>Montant : (€)</b></p>
    <%= text_field_tag :amount, nil, :placeholder => "ex : 123.45", :class => "span3" %>
    <p style="margin-top:15px"><b>Destination</b></p>
    <%= select_tag :user_id, options_for_select(@users_select), :class => "span3" %>
    <p><br /></p>
    <%= hidden_field_tag :current_user_id, @currentUser.id %>
  </p>
<% end %>
<% footer = submit_tag "Rembourser", :class => "btn primary", :id =>"Rembourser" %>
<% after = "</form>" %>

<div style="margin-top:30px;text-align:center">
  <%= render_popup (nil,'refund', '+ Rembourser', header, body, footer, after)%>
</div>

现在我有一个可行的解决方案，但它并不完美。如果我能放弃会很好after = "</form>"吗？

4

1 回答 1

4

创建一个文件夹app/views/shared，在该文件夹中添加一个名为的部分，_popover.html.erb其中包含：

<%= before %>
<div id="<%= popover_id %>" class="modal hide fade">
  <div class="modal-header">
    <a href="#" class="close">&times;</a>
    <%= header%>
  </div>
  <div class="modal-body">
    <%= body %>
  </div>
  <div class="modal-footer">
    <%= footer %>
  </div>
  <% end %>
</div>
<%= after %>
<button data-controls-modal="<%= popover_id %>'" data-backdrop="true" data-keyboard="true" class="btn primary">
  <%= button %>
</button>

然后在你的助手中你可以写：

def render_popup(before,id ,button ,header, body, footer, after)
  render :partial => 'shared/popover', 
         :locals => {:popover_id => id, :header => header, :body => body, 
                     :footer => footer, :before => before, :after => after}
end

希望这可以帮助。

于 2011-11-18T12:49:02.350 回答