在Rails中实现分布提交表单

前言

产品经理期待能够分布提交表单。第一次做这方面的,觉得有点难。

在这次,我对它的处理是提交了三次表单。

然而后来在对这个表单编辑时,又有做成一个表单。所以,理论上三次分布只提交一次表单也是可行的。

实现

介绍利用到的数据模型

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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,118评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,156评论 19 139
  • 眼瞅着进入了倒计时的阶段,我确实有点慌,也许沙河众人经历过一些血雨腥风,但是我却没有,我上一次跟人打架还是在小学,...
    鱼爷的道场阅读 363评论 0 1
  • 码字三个月,遇到很多问题,什么文笔不好,不能坚持写,不会修改,没有人看,统统都是小问题。最大的问题是什么呢?最大的...
    千尘阅读 178评论 0 3
  • 最近参加了刺猬体验的东南亚项目的体验官活动,虽然可以选上的几率是微乎其微的,但仍然觉得「体验」是一种很好的生活概念...
    小思路阅读 341评论 1 1