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

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

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

  1. 時常看到很多人把 HTML 寫在 JS 裡面，可是這樣會參雜沒有分離，程式碼難維護 
    var html = "<ul><li>" + title + "</li></ul>";
  2. 把循環的 HTML 包在<script>，例如有些 jQuery 模版外掛 
    <script class="news_list" type="XXX">
  <tr>
    <td></td>
  </tr>
</script>

    或是透過 CSS 樣式隱藏

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

    我以前常用的是 CSS 樣式隱藏。但是不直覺，且一旦頁面有多筆 AJAX，會一塊一塊的，要寫註解才知道這塊 DIV 裡面的 HTML 是誰的模版。

  3. 直接後端輸出也是個方法，以前也用；但是當數據量大的時候，後端 AJAX 回應的數據包有HTML 勢必會比純 JSON 肥大。優點是開發超級快速。但一來，跟第 1 條一樣都是 HTML 與其他程式碼綁在一起，維護不好維護。

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

<ul cppy3>
    <li cppytemp>$title : $$price </li>
</ul>

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

<li cppytemp>$title : $$price </li>

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

變數取代

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

放在GitHub

我們看線上範例

使用方法

  1. 使用 jQuery 核心
  2. 加入 cppy.js
  3. 編輯你的html 
    <div cppy><!-- 1. 自訂要被控制的屬性或是使用class也可以 -->
    <ul cppytemp data-id="$id"> <!-- 2. 指定底下的模板是誰，添加規定的屬性 cppytemp 即可。 -->
        <li>$title</li>
        <li>$content</li>
    </ul>
</div>
  4. 添加 jQuery 
    // $(選擇器).cppy(); 或 
// $(選擇器).cppy(單筆json格式資料); 或
// $(選擇器).cppy(多筆json格式資料);


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

示範的使用說明 Demo.html

    <script src="jQuery.js"></script><!-- 使用 jQuery 核心 -->
    <script src="cppy.js"></script><!-- 使用 cppy 外掛 -->

    <script>
    $(function (){

        $("[cppy]").cppy(
            [
                {
                    "id" : "0001",
                    "title" : "星期一",
                    "content" : "工作"
                },
                {   
                    "id" : "0002",
                    "title" : "星期二", 
                    "content" : "旅遊"
                }
            ]
        , "asc");


        $("[cppy2]").cppy(
            [
                {
                    "id" : "0001",
                    "title" : "星期一",
                    "content" : "工作"
                },
                {   
                    "id" : "0002",
                    "title" : "星期二", 
                    "content" : "旅遊"
                },
                {
                    "title" : "星期三",
                    "content" : "開會"
                },
                {
                    "title" : "星期四",
                    "content" : "洗溫泉"
                }
            ]
        );

        $("table").on("click", "td", function (){
            alert("已綁定")
        });

        // 單筆資料的可能狀況
        $("[cppy3]").cppy();
        var data = {
            title: "蘋果",
            price: 50
        };
        $("[cppy3]").cppy(data);

    });
    </script>

    
    <div cppy>
        <ul cppytemp data-id="$id">
            <li>$title</li>
            <li>$content</li>
        </ul>
    </div>


    <table cppy2 border="1">
        <tr cppytemp>
            <td>$title</td>
            <td>$content</td>
        </tr>
    </table>

    <ul cppy3>
        <li cppytemp>$title : $$price </li>
    </ul>

放在GitHub

發表迴響