jQuery – vmodel.js 討論列表範例教學(3) 如何改版?

這次的例子簡單多了,旨在簡化改版這件事情的介紹。我們模擬當版面設計僅需要小幅度修改時,如何應對。

先去看線上範例。

大家知道在 jQuery 的推廣概念中,將 JavsScript、HTML、CSS 支解分離是能夠有效的降低彼此的依附關聯,對於編碼來說會非常乾淨,也容易理解、容易修改。針對之前的例子,我們試試看如何透過 vmodel 做修改。

假設需求是要添加刪除按鈕。

舊款

擷取

新款

擷取

當滑鼠移入時,會出現刪除按鈕,這個動作不是太過花俏,所以可以從 CSS 直接修改。而 HTML 的部分,也只需要修改 .comment 的編碼,加入新的元素即可。目前為止不會動到任何的 jQ。

修改結構

其中這段後面的 .del 是新添加的元素,就是代表那顆刪除的叉叉。

 

開始修改邏輯部分

當我們把HTML編碼調整到你要的定位後,設定新的 CSS ,接著才來動作 vmodel 的部分。完整程式碼如下

首先,我們要做 「點擊後觸發刪除該則討論」,所以 “md/list” 添加函式 delete()

一樣記得刪除這件事情,是由 “md/list” 綁定喔!至於為什麼就參考 上一篇 的說明。當事件綁定後,會去呼叫 “md/comment” 的 remove_element()

這邊要記得使用 parent() 而不是 parents() ,不然會刪除到最頂端的選擇器。透過這支函式,我們就做到刪除的動作了。

那麼接下來,因為 .message 也使用了相同的 comment 模組,只是 .message 屬於提示訊息,我們並不希望他有刪除的按鈕,這該怎麼辦呢?沒關係,我們來看看接著要修改 “md/message” 的 update();

這邊我們只要再添加一些判斷,並透過模組 “md/comment” 來呼叫 remove_delete_button() ,如此一來就能夠移除 .message 底下 .comment 的 .del 喔!

 

結語

在製作使用者介面的時候,基本上還是把 HTML 的標籤,放置在 HTML 的位置,CSS 的部分寫在 CSS 的位置,而不是放在任何的 JavaScript 或  jQuery 的部分。jQuery.vmodel() 主要沿用這樣的概念設計,當我們需要換版面或是添加小零件時,才不會發生「我這句 HTML 應該要去 HTML 的位置找呢,還是要去看 jQuery 的部分?」統一集中處理,是非常必要的習慣。像我們這邊因為要添加刪除按鈕,很自然的,會先去處理 HTML + CSS ,之後才會去處理 jQuery.vmodel() 的邏輯。希望透過這些範例教學,可以讓你感受到使用 vmodel() 設計的複雜介面時的優點,歡迎大家下載來玩玩

 

完整教學範例

 

發表迴響