jQuery – javascript – cppy 依照數據自動在地 each 模版

2014-12-15 / JSN / 0 Comments / 636 次瀏覽

最常在 AJAX 的時候，我們會需要each 某塊 HTML，並將 JSON 的值安插在 HTML 裡面。例如 AJAX 文章列表。可能會有下面這些做法

1. 時常看到很多人把 HTML 寫在 JS 裡面，可是這樣會參雜沒有分離，程式碼難維護
   
   1 2 3

   var html = "<ul><li>" + title + "</li></ul>";

2. 把循環的 HTML 包在<script>，例如有些 jQuery 模版外掛
   
   1 2 3 4 5 6 7

   <script class="news_list" type="XXX">   <tr>     <td></td>   </tr> </script>

   
   或是透過 CSS 樣式隱藏
   
   1 2 3 4 5 6 7

   <div style="display:none">     <tr class="news_list">         <td></td>     </tr> </div>

   
   我以前常用的是 CSS 樣式隱藏。但是不直覺，且一旦頁面有多筆 AJAX，會一塊一塊的，要寫註解才知道這塊 DIV 裡面的 HTML 是誰的模版。
3. 直接後端輸出也是個方法，以前也用；但是當數據量大的時候，後端 AJAX 回應的數據包有HTML 勢必會比純 JSON 肥大。優點是開發超級快速。但一來，跟第 1 條一樣都是 HTML 與其他程式碼綁在一起，維護不好維護。

所以我寫了一個方法，把需要的模版，就直接寫在需要動態 each 的區塊裡就好了。例如

這個是屬於 cppy3 的模版，記得加入叫做 cppytemp 的屬性

模版就直接寫在標籤裡面就好了，不需要切出來；切出來這件事情交給 jQuery 吧。

變數取代

使用 $title 代表它是準備被替換的變數。$title 要被替換成什麼值取決於你的數據，例如你的 JSON 數據是 {title: “標題”} 那麼 『$title』 就會被替換成 『標題』 兩個字；如果 JSON 有 {price:100} 那就會把 『$price』替換成『100』。

放在GitHub

我們看線上範例

使用方法

1. 使用 jQuery 核心
2. 加入 cppy.js
3. 編輯你的html
   
   1 2 3 4 5 6 7 8

   <div cppy><!-- 1. 自訂要被控制的屬性或是使用class也可以 -->     <ul cppytemp data-id="$id"> <!-- 2. 指定底下的模板是誰，添加規定的屬性 cppytemp 即可。 -->         <li>$title</li>         <li>$content</li>     </ul> </div>

4. 添加 jQuery
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   // $(選擇器).cppy(); 或 // $(選擇器).cppy(單筆json格式資料); 或 // $(選擇器).cppy(多筆json格式資料);     $("[cppy]").cppy(     [         {             "id" : "0001",             "title" : "星期一",             "content" : "工作"         },         {               "id" : "0002",             "title" : "星期二",             "content" : "旅遊"         }     ] , "asc"); //預設 asc 可不填，會按照給予的資料排序顯示

示範的使用說明 Demo.html

放在GitHub