在Rails中實現(xiàn)分布提交表單

前言

產(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憨琳。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末诫钓,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子篙螟,更是在濱河造成了極大的恐慌菌湃,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,332評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件遍略,死亡現(xiàn)場離奇詭異惧所,居然都是意外死亡,警方通過查閱死者的電腦和手機绪杏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評論 3 385
  • 文/潘曉璐 我一進店門下愈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蕾久,你說我怎么就攤上這事势似。” “怎么了僧著?”我有些...
    開封第一講書人閱讀 157,812評論 0 348
  • 文/不壞的土叔 我叫張陵履因,是天一觀的道長。 經(jīng)常有香客問我盹愚,道長搓逾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,607評論 1 284
  • 正文 為了忘掉前任杯拐,我火速辦了婚禮霞篡,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘端逼。我一直安慰自己朗兵,他們只是感情好,可當我...
    茶點故事閱讀 65,728評論 6 386
  • 文/花漫 我一把揭開白布顶滩。 她就那樣靜靜地躺著余掖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪礁鲁。 梳的紋絲不亂的頭發(fā)上盐欺,一...
    開封第一講書人閱讀 49,919評論 1 290
  • 那天,我揣著相機與錄音仅醇,去河邊找鬼冗美。 笑死,一個胖子當著我的面吹牛析二,可吹牛的內(nèi)容都是我干的粉洼。 我是一名探鬼主播节预,決...
    沈念sama閱讀 39,071評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼属韧!你這毒婦竟也來了安拟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,802評論 0 268
  • 序言:老撾萬榮一對情侶失蹤宵喂,失蹤者是張志新(化名)和其女友劉穎糠赦,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锅棕,經(jīng)...
    沈念sama閱讀 44,256評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡愉棱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,576評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了哲戚。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奔滑。...
    茶點故事閱讀 38,712評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖顺少,靈堂內(nèi)的尸體忽然破棺而出朋其,到底是詐尸還是另有隱情,我是刑警寧澤脆炎,帶...
    沈念sama閱讀 34,389評論 4 332
  • 正文 年R本政府宣布梅猿,位于F島的核電站,受9級特大地震影響秒裕,放射性物質(zhì)發(fā)生泄漏袱蚓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,032評論 3 316
  • 文/蒙蒙 一几蜻、第九天 我趴在偏房一處隱蔽的房頂上張望喇潘。 院中可真熱鬧,春花似錦梭稚、人聲如沸颖低。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽忱屑。三九已至,卻和暖如春暇昂,著一層夾襖步出監(jiān)牢的瞬間莺戒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評論 1 266
  • 我被黑心中介騙來泰國打工急波, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留从铲,地道東北人。 一個月前我還...
    沈念sama閱讀 46,473評論 2 360
  • 正文 我出身青樓幔崖,卻偏偏與公主長得像食店,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子赏寇,可洞房花燭夜當晚...
    茶點故事閱讀 43,606評論 2 350

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,832評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理吉嫩,服務(wù)發(fā)現(xiàn),斷路器嗅定,智...
    卡卡羅2017閱讀 134,637評論 18 139
  • 眼瞅著進入了倒計時的階段自娩,我確實有點慌,也許沙河眾人經(jīng)歷過一些血雨腥風渠退,但是我卻沒有忙迁,我上一次跟人打架還是在小學,...
    魚爺?shù)牡缊?/span>閱讀 319評論 0 1
  • 碼字三個月碎乃,遇到很多問題姊扔,什么文筆不好,不能堅持寫梅誓,不會修改恰梢,沒有人看,統(tǒng)統(tǒng)都是小問題梗掰。最大的問題是什么呢嵌言?最大的...
    千塵閱讀 153評論 0 3
  • 最近參加了刺猬體驗的東南亞項目的體驗官活動摧茴,雖然可以選上的幾率是微乎其微的,但仍然覺得「體驗」是一種很好的生活概念...
    小思路閱讀 321評論 1 1