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

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

  1. 時常看到很多人把 HTML 寫在 JS 裡面,可是這樣會參雜沒有分離,程式碼難維護
  2. 把循環的 HTML 包在<script>,例如有些 jQuery 模版外掛

    或是透過 CSS 樣式隱藏

    我以前常用的是 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
  4. 添加 jQuery

示範的使用說明 Demo.html

放在GitHub

發表迴響