初步認識 Drupal Behaviors

初步認識 Drupal Behaviors

前言

作為 Drupal 前端開發者,想必曾發生過,在Drupal 的 Ajax 一旦觸發後,你所撰寫的 Javascript 會對動態的元素,起不了任何作用。 這麼強大的 Drupal 難道沒有辦法解決這個方法嗎? 其實是有的,Drupal Javascript API 提供了一個方法叫 Behaviors。接下來小編帶讀者們認識 Drupal Behaviors 的強大之處。

為何 Javascript 對動態元素會沒有任何作用,如對這有興趣可以參考這裡的簡單說明

Drupal Behaviors

它有什麼樣的功能?

它是由 Drupal Javascript API 提供的一個功能,它有以下的作用:
1.提供後端的資料送到前端去使用,這能使得很多前端的特效功能的重複使用性大大提高了許多。

Floating block 模組 和 Sticky Navigation 模組 有使用過這兩個模組的人,都知道它們的功能會將頁面上特定的元素,隨著使用者往下滑元素也會跟著移動的功能。重點在這個特定的元素,它們都可以在 Drupal 後台進行指定元素,並且存到資料庫中,當要使用時,會將這些已存在資料庫中的特定元素,經由 Behaviors 送到前端使用。

2.解決 Drupal Ajax 觸發後,讓你撰寫的程式碼沒有反應的情形。(如:新增 DOM 到頁面上、或是刪除…等等的操作)。

views 模組和 views load more 模組 都是使用 Ajax 來改變 DOM, 它們也是使用 Behaviors 的方式解決此問題。

怎麼使用它?

你可能在思考如何把它應用到你的專案中,其實並不難。你只需要將以下的程式碼貼到你的JS檔案中即可。

Drupal.behaviors.custom_name = {
attach: function (context, settings) {
// 在這裡撰寫你的程式碼
}
};
  1. custom_name: 這個變數是依照你個人喜好來決定。
  2. context: 最一開始讀取完頁面後,這個變數裡面會裝著一個完整的 Javascript document的物件,之後會隨著 Drupal Ajax 的觸發,裡面的值也會跟著改變。如果對這個還是不理解,可以自行實際操作用console.log 自己看這裡面的變化。
  3. settings: 放著是後端丟給前端的資料。

如果不知道如何引用 JS 檔案可以參考這裡,這裡並不提這一塊。

什麼時候可以使用它?

當你的頁面有使用到 Drupal Ajax,都務必使用它,否則你會發生程式碼沒有反應的情況。

結論

Drupal Behaviors 可以讓程式碼的重複使用的機會提高,而且增大彈性。同時也解決了動態元素的問題,真的是一個非常好用的 API,如果你對 Behaviors 有任何問題或是哪有有錯誤,歡迎糾正及討論。