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')

于是，問題輕松的就解決了。

最新評(píng)論