Nitrogen 套用 bootstrap 客製版面

由於我用 Nitrogen 製作網頁是『直接攻頂』,一開始朝著 Single-page Application 模式製作,因此難度高一些。加上要套嵌一份以 bootstrap 為基礎的版面,更有許多難度。

摸索了一陣子之後,發現整體來說有二點原則:

1. 用 wf:update/2 更新局部網頁元素之後,接著要用 wf:defer/2 與這些元素有關的操作加進去。( wf:update/2 之後,若使用 wf:wire/2 無效,則用 wf:defer/2 或 wf:eager/2 。)

2. 用 wf:defer/1 ,參數為以 JavaScript 為內容的字串。

整體來說,雖然一開始包含 jQuery 及 bootstrap 等 JavaScript 程式套件都已經生效,但是,有些 $(document).on(‘click’, …) 之類的設定,在更新了網頁元素之後,有一些元素並沒有更新到 ‘click’ 等等的動作,而這些可以使用 wf:defer/1 追加 JavaScript 內容。而且要注意的是,在使用 wf:defer/1 追加 JavaScript 內容時,本來寫在 (function($){ … })(jquery) 中的程式、以及本來寫成 $(document).ready(function(e){ … }) 的程式,其程式內容都應該拆解出來,寫在 wf:defer/1 所使用的字串中,或者是寫在獨立的 .js 檔中,由檔案輸入而讓 wf:defer/1 使用,如以下例子。

{ok, Binary} = file:read_file("site/static/js/app.reload.js"),
wf:defer(Binary),

如果將某些 JavaScript 程式藉由 wf:defer/1 加入而沒有效果,我想關鍵的問題及知識應該是在於 JavaScript 如何在網頁上運作,而不須因為 JavaScript 跑不順而抱怨 Nitrogen 。

廣告

About 黃耀賢 (Yau-Hsien Huang)

熱愛 Erlang ,並且有相關工作經驗。喜歡程式語言。喜歡邏輯。目前用 Python 工作。
本篇發表於 Erlang, Web Programming。將永久鏈結加入書籤。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s