Rails 3: написать помощник вида для popovers - PullRequest
Новая
       49

Rails 3: написать помощник вида для popovers

3 голосов
/ 18 ноября 2011

Я новичок в рельсах, и в своем текущем проекте я использую Bootstrap из Twitter. Popover 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>

Как вы видите, у меня есть пополам форма. Поле формы находится в теле, а кнопка отправки находится в нижнем колонтитуле. Всплывающее окно отображается правильно, но кнопка отправки не работает (она работает без помощника).

Как я могу правильно написать вспомогательную функцию и справиться с проблемой "spited form"?

Обновление 1

Основываясь на комментариях Натанвды и Клайфа, я отредактировал своего помощника и создал частичный.
Вот код частичного: 

<%= 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>"?

1 Ответ

4 голосов
/ 18 ноября 2011

Создайте папку 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

Надеюсь, это поможет.

...