jQuery – vmodel.js 討論列表範例教學(2) 添加回覆功能

上一則提到我們試著用 vmodel 做出討論列表,但如果需要讓使用者,針對每一則留言去回覆,那就會更加複雜了。沒關係,我們試試如何透過 vmodel 解決這個複雜的介面設計。vmodel 試圖解決一個明確問題就是:程式碼容易閱讀。解決複雜的介面設計,不代表要用什麼特殊的、另類的、炫麗的技巧來完成,能用最簡單的方式解決困難的問題,是 vmodel() 要做的事情。

線上看即時範例

比對舊版面與新版面

(舊款)

擷取

(新款)

擷取

 

我們可以看到,這次新的版面多多出「回覆列表 + 回覆表單」。回覆列表的每則訊息方塊(黃色姓名的一則一則),都叫做 .comment ,HTML 其實都是直接 copy 原本就有的編碼。只是透過CSS匯了一些樣式。所以我們工程師與設計師溝通,就知道 .comment 的模組勢必可以重複使用。

拿到版面,我們應該會看到靜態HTML編碼長這樣

好的,太多不想看沒關係,我們看這次新增的重點。位在原本 .comment 底下的最後面,增加了 .box_reply

我們簡述它的結構表示會長這樣

好的,接著我們要支解這些繼承關係,變成彼此互不關聯的編碼。所以整個架構會變成整樣

我們細看這次添加的重點位置

開始修改程式

我們整個修改完的會是這樣

建立關係

要添加新的模組,我們一樣,要先透過 vmodel 渲染彼此的關聯。把每個新模組拼湊起來。

先讓 md/box_reply 觸發初始化吧

目前我們只是去呼叫  “md/form_reply” 與 “md/list_reply” 讓它們將HTML擺放到我們希望的位置,也就是 .box_reply 底下。

添加隱藏的回覆框

.box_reply 目前還是在最外層喔,沒有歸屬在誰底下。一直到「使用者點選某人的留言文字,才會出現」。所以我們修改 “md/form” 並添加了 this.submit() 添加送出後的動作

沒錯,我們是透過自訂的回呼含式,讓使用者送出討論表單 (.form) 後,會把最外層的回覆框模版,整個複製到留言的最後位置。

我們看看呼叫 md/box_reply 做放置的部分

這樣就完成了。我們在最上方打上文字、按下送出,會把文字更新到下方的列表。這時候下方列表,「會加入被隱藏的回覆框」。

當使用者想要針對某則留言做回覆

使用者點了留言文字,這件事情我們要修改在 “md/list” 並添加新的 this.when_reply() ,我們會去呼叫模組 “md/form_reply” 做顯示的動作。

注意!為什麼事件要綁定在 “md/list” 模組,而不是在 “md/form_reply” 呢?這是一個經驗上的複雜問題,但歸類到的經驗結果很簡單,因為比較好做。將事件綁定在 “最少動態添加的位置” 是比較適合的,這樣可以大幅降低手寫動態綁定的事情。當然,要把所有事件都綁在同一個HTML標籤當然也可以,但是我們要盡可能分散。每個根元素盡量分開,並讓不同的概念綁定在上面,才會知道每個根元素,帶有各有不同的意義。再來,性能會比較好。下面是說明

現在,使用者回覆表單已經顯示出來了,使用者可以在上面打字,打完以後送出的動作,也會在 “md/list” 這邊

送出的實際動作我們交給 “md/form_reply” .send() 去執行。並傳入,現在哪張回覆表單要送出。這很重要喔。我們看一下整體的 “md/form_reply” 模組。

我們看送出的地方,

我們送出回覆文字,會需要馬上更新該則訊息的「回覆列表」,所以我們要知道等下是「哪篇訊息的回覆列表」需要被更新。所以更新回覆列表,我們看 “md/list_reply” 的 reload()

因為該篇留言,可能有很多人回覆了,所以我們透過AJAX取得資料,批次將它顯示,也就是透過 “md/comment” .reply() 將訊息放入。

“md/comment” 在上篇例子已經存在,他是負責處理每則討論訊息的模組。我們這裡擴充了 .reply() 負責處理回覆的訊息。

在這裡我們只需要將數據放入模版、再放到指定地點,這兩件事情而已。

好了,這次擴充回覆留言功能完成了喔!是不是讓你的思維更加清晰了呢?每個模組各司其職,每個方法只做一件小單位的處理,是物件導向的概念。如果本身就使用物件導向開發,一定很快就能將這個概念,透過 vmodel 建構出你的前端介面囉。

 

完整教學範例

Comments

發表迴響