设计Rails Bootstrap - 注册模态

时间:2014-06-03 04:44:05

标签: ruby-on-rails twitter-bootstrap devise

我正在尝试使用模态来实现我的Rails Devise Bootstrap登录&注册表格。

我试图将views / devise / shared / registration_items中的链接更改为:

<% if user_signed_in? %>
  <li>
  <%= link_to('Edit registration', edit_user_registration_path) %>
  </li>
<% else %>
  <li>
  <%= link_to('Register', new_user_registration_path, data-toggle="modal" data-target="#myModal") %>
  </li>
<% end %>

我在'link_to(注册...'行中出现语法错误。请有人告诉我如何使这些表单与引导模式一起使用。

如果有帮助,这是我的registration_new视图:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Sign up</h4>
      </div>
      <div class="modal-body">
           <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
             <%= f.error_notification %>

             <div class="form-inputs">
               <%= f.input :first_name, required: true, autofocus: true %>
               <%= f.input :last_name, required: true, autofocus: true %>
               <%= f.input :email, required: true, autofocus: true %>
               <%= f.input :password, required: true %>
               <%= f.input :password_confirmation, required: true %>


                  </div>

      </div>
      <div class="modal-footer">
        <div class="form-actions">
              <%= f.button :submit, "Sign up" %>
            </div>
        <% end %>
        <%= render "devise/shared/links" %>


      </div>
    </div>
  </div>
</div>

谢谢

1 个答案:

答案 0 :(得分:0)

你错过了一个逗号:

<%= link_to('Register', new_user_registration_path, data-toggle="modal", data-target="#myModal") %>

此外,您应该将额外参数设为哈希值,或者更好:

<%= link_to 'Register', new_user_registration_path, 'data-toggle' => "modal", 'data-target' => "#myModal" %>

应该有效。 Check this