3

私はレールが初めてで、現在のプロジェクトではTwitterのBootstrapを使用しています。Bootstrap のポップオーバーは美しく、広く使用する予定なので、ポップオーバー用のビュー ヘルパーを作成したいと考えています。

popover の標準的な 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 に答える