前言
产品经理期待能够分布提交表单。第一次做这方面的,觉得有点难。
在这次,我对它的处理是提交了三次表单。
然而后来在对这个表单编辑时,又有做成一个表单。所以,理论上三次分布只提交一次表单也是可行的。
实现
介绍利用到的数据模型
Group -> Roles
一个Group中有若干的Role,而Group的创建会随之建立一个属于创建者的Role。
在实现分布提交前,已经有可以直接使用的Model了,不过我也对它有一点点细节方面的修改。
实现中会遇到的难题
在controller中的处理还是满简单的,与一次性提交的表单的区别是,将一些格式限制暂时的忽略掉。
group.rb
validates :group_xxx, presence: { message: "..." },
format: { with: xx_xx, message: "..." },
length: {
minimum: num,
too_short: "..."
},
unless: :skip_validate_group_code
groups_controller.rb
@group.update_attributes(group_params.merge({skip_validate_group_code: false}))
使用Ajax做提交,与controller的配合。利用controller的render属性把新的表单传递到Ajax的data,替换掉原来的表单。
之所以要选择Ajax做处理是因为,表单输入错误的时候,给予其错误提示。
groups_controller.rb
if @group.save
render partial: 'form_one'
eles
render partial: 'form_two'
end
js
$(document).ready(function(){
$('body').delegate('#form_one, #form_two, #form_three', "ajax:success", function(event, data, status, xhr){
$('.modal-dialog').html($(data));
});
});
html
<body>
<div class="modal-dialog">
<%= render 'form_one' %>
</div>
<body>
_form_one.html.erb
<div id="#form_one">
<%= form ... , remote: ture do |f| %>
<% end %>
</div>
做完这部分后,发现了在第三次表单提交后,对于它的期望是跳转到另外一个页面的。然而因为remote这个属性,它一律把读取的页面都会传递给ajax做处理。
所以,在controller中第三个表单提交成功后,传递的仅仅是一个id。我在js中为他传递的内容做了判断,以此来选择是替换内容或者是跳转页面。
group_controller.rb
if @role.save
render id: id
else
render 'form_three'
end
js
// Redirect if returned data is object
if (typeof data == 'object') {
return location.href = "..." + data.group_id;
}
// Show form modal if returned data is HTML
if ($(data).find('.navbar-brand').length == 0) {
$('.modal-dialog').html($(data));
}
后续
在这件事情过去后一个月。产品经理本着精益求精的心态(喂,让我重新做这个功能。一开始是要求在第三步的时才提交表单,而不是分三次提交。后来跟经理讨论需要,把它改为第二次和第三次分别提交了两次。
对于Controller 与 view 传递数据的理解
在我们访问一个新的页面的时候,会在 controller 里面找到 action 对应的方法。它会传递全局变量给 view。 view 传递给 controller 数据只能通过 params。
但是 controller 使用 render 读取页面是没有刷新的,那么 view 被打开也不会请求相应的 action 方法。view 将继承 controller 给予的全局变量。
总而言之就是 controller 与 view 是会互相传递数据的。 controller 传给 view 的是全局变量,而 view 传递给 controller 的是 params。