jquery_ujs 對(duì) rails 來說,是一個(gè)非常重要的組件,它包含在 rails 的默認(rèn)組件之中。
jquery ujs 包含一些非常便捷的功能,比如確認(rèn)對(duì)話框、觸發(fā) ajax、自動(dòng)禁用表單提交按鈕等,本文主要討論的是觸發(fā) ajax 的功能。
通過添加簡(jiǎn)單的標(biāo)簽屬性,jquery ujs 可以把一個(gè)普通的鏈接或者表單轉(zhuǎn)換成 ajax 提交,而不需要寫 JavaScript 代碼。
%= link_to '關(guān)閉項(xiàng)目', close_project_path(project), remote: true, method: :post %>
上面的代碼會(huì)生成如下的代碼
a href="/projects/1/close" data-remote="true" data-method="post">關(guān)閉項(xiàng)目/a>
當(dāng)用戶點(diǎn)擊后,它會(huì)觸發(fā)一個(gè)指向地址 /projects/1/close,method 為 post 的 ajax 請(qǐng)求,而不是 get 的 普通請(qǐng)求,這樣使得實(shí)現(xiàn) ajax 調(diào)用變得非常便捷。
網(wǎng)速慢導(dǎo)致的問題
事情并不都是美好的,在網(wǎng)速比較慢的時(shí)候,jquery ujs 的這個(gè)實(shí)現(xiàn)會(huì)出問題,如果文檔還沒有加載完成,用戶就點(diǎn)擊了鏈接,頁面會(huì)發(fā)起一個(gè)到鏈接地址的 GET 請(qǐng)求,頁面會(huì)跳轉(zhuǎn),但指向該地址的 GET 請(qǐng)求可以并不存在,這樣就會(huì)出錯(cuò)。
有用戶有提過一個(gè)相關(guān)的 Issue,但是開發(fā)者并沒有受理,然而網(wǎng)速慢是中國(guó)的國(guó)情,問題我們還是得處理,借助于 CSS3 的一些特性,這個(gè)問題其實(shí)也不難解決。
pointer-events
pointer-events: none;
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
這個(gè)屬性可以禁止元素的點(diǎn)擊事件,因?yàn)橐话?CSS 是先加載的,我們只要控制在頁面加載完成之前給 jquery ujs 相關(guān)的元素應(yīng)用 pointer-events: none; 樣式,在頁面加載完成后再去除該樣式,就可以解決網(wǎng)速慢的情況下,頁面沒有加載完成時(shí)用戶點(diǎn)擊 rmote 鏈接導(dǎo)致的錯(cuò)誤了。
解決方案
添加如下的全局樣式,默認(rèn)情況下含有 data-remote 和 data-method 屬性的標(biāo)簽不可點(diǎn)擊,除非 body 元素含有名為 ready 的 css class。
[data-remote], [data-method] {
pointer-events: none;
button, input[type=submit] {
pointer-events: none;
}
}
body.ready {
[data-remote], [data-method] {
pointer-events: auto;
button, input[type=submit] {
pointer-events: auto;
}
}
}
然后通過段簡(jiǎn)單的腳本讓頁面加載后給 body 元素添加 ready class
$(document).ready ->
$('body').addClass('ready')
于是,問題輕松的就解決了。