前言
產(chǎn)品經(jīng)理期待能夠分布提交表單。第一次做這方面的募狂,覺得有點難办素。
在這次,我對它的處理是提交了三次表單祸穷。
然而后來在對這個表單編輯時性穿,又有做成一個表單。所以雷滚,理論上三次分布只提交一次表單也是可行的需曾。
實現(xiàn)
介紹利用到的數(shù)據(jù)模型
Group -> Roles
一個Group中有若干的Role,而Group的創(chuàng)建會隨之建立一個屬于創(chuàng)建者的Role。
在實現(xiàn)分布提交前呆万,已經(jīng)有可以直接使用的Model了刻蚯,不過我也對它有一點點細節(jié)方面的修改。
實現(xiàn)中會遇到的難題
在controller中的處理還是滿簡單的桑嘶,與一次性提交的表單的區(qū)別是炊汹,將一些格式限制暫時的忽略掉。
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>
做完這部分后废菱,發(fā)現(xiàn)了在第三次表單提交后,對于它的期望是跳轉(zhuǎn)到另外一個頁面的抖誉。然而因為remote這個屬性殊轴,它一律把讀取的頁面都會傳遞給ajax做處理。
所以袒炉,在controller中第三個表單提交成功后旁理,傳遞的僅僅是一個id。我在js中為他傳遞的內(nèi)容做了判斷我磁,以此來選擇是替換內(nèi)容或者是跳轉(zhuǎn)頁面孽文。
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));
}
后續(xù)
在這件事情過去后一個月。產(chǎn)品經(jīng)理本著精益求精的心態(tài)(喂夺艰,讓我重新做這個功能芋哭。一開始是要求在第三步的時才提交表單,而不是分三次提交郁副。后來跟經(jīng)理討論需要减牺,把它改為第二次和第三次分別提交了兩次。
對于Controller 與 view 傳遞數(shù)據(jù)的理解
在我們訪問一個新的頁面的時候霞势,會在 controller 里面找到 action 對應(yīng)的方法烹植。它會傳遞全局變量給 view斑鸦。 view 傳遞給 controller 數(shù)據(jù)只能通過 params愕贡。
但是 controller 使用 render 讀取頁面是沒有刷新的,那么 view 被打開也不會請求相應(yīng)的 action 方法巷屿。view 將繼承 controller 給予的全局變量固以。
總而言之就是 controller 與 view 是會互相傳遞數(shù)據(jù)的。 controller 傳給 view 的是全局變量,而 view 傳遞給 controller 的是 params憨琳。