透過jQuery Template把JSON資料套入範本

有位朋友提到了，在前面組html這個動作不太好。的確，這樣子View跟組html的程式（可能是server端，也可能是JavaScript組的）就綁得很緊。未來需求異動，可能導致程式碼要調整很多，甚至會漏了調整而導致程式出錯。這篇文章，要介紹的jQuery Template plugin，就是要解決這樣的問題。

有興趣的朋友們，可以參考黑大的一系列文章（雖然是2010年的文章，但還是相當受用，jQuery幾乎都是看著黑大在學的），我自己有整理了一下這系列文章的入口點，請參考：http://wiki.dotblogs.com.tw/hatelove.jQuery-plugin.ashx

範例
這篇文章的範例，就沿著前一篇文章，我們只在Sample.aspx上，當ajax成功，呼叫callback的success function時，把原本組html的部分，改成套用jQuery的Template。

對ASP.NET比較熟的朋友，可以把這段程式碼，當作是在使用client端的ListView：

1. Template的範本部分，是ItemTemplate。
2. .aspx上面的HTML，是LayoutTemplate。
3. 資料來源的部分，是在JavaScript上，用ajax去server端撈的資料集合。(Server端的程式碼幾乎一樣，如果有切layer，這邊就會感受到View脫離Model了，該.aspx, .ashx, .asmx，就只是在做序列化動作而已)
4. 透過.tmpl(JSON資料)，來當作assign給ListView的DataSource，並呼叫DataBind()。

以上的動作，都不用postback。而且畫面上的值，可以透過jQuery來存取DOM，再組成JSON，透過ajax，pass給server端的handler。用ListView的角度來看，就是不用postback，就可以不斷地呈現不同的查詢結果。

結論 
同上一篇結論，當不postback，有很多jQuery的plugin，就可以用得很快樂。一旦有地方要postback，就代表這些ajax處理的東西，在每一次頁面的載入，都應該要再執行一次，因為http是無狀態的。有了這樣的基礎，現在就算是整個頁面都不可以用postback，應該也沒啥好恐懼的吧。

Sample Code：JSON with jQuery Template.zip

原始文章出自於此