JavaScript Templating Engines

ก่อนอื่นที่เราจะมาทำความรู้จักกับการใช้ Template Engines เรามารองดูปัญหากันก่อนนะครับ ตอนที่ผมเริ่มลองใช้ Ajax กับ Json ใหม่ๆ ผมก็มีการเขียน Code เพื่อวาด Table ดังตัวอย่าง Code ด้่งล่างครับ

Url ที่ Provide Rest Api

http://www.javascriptthai.com/AppDesign/TemplateEngine/ApiService/DataApiSample.php

Code การแสดงข้อมูลจาก Link บน

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <style>
        table {
            background: #34495E;
            color: #fff;
            border-radius: .4em;
            overflow: hidden;
            width: 100%;
        }

        tr {
            border-color: #34495E;
        }

        th, td {
            margin: .5em 1em;
            text-align: center;
        }

            th, td:before {
                color: #dd5;
            }
    </style>

    <script src="jquery-2.1.4.min.js"></script>
    <script>

        $(document).ready(function () {

            RenderTable(); //สั่งวาด Tr ลงใน Table tbResult
        });

        function RenderTable() {
            var url = "/AppDesign/TemplateEngine/ApiService/DataApiSample.php";

            //เรียก Data แบบ async และเมื่อเกิด function Call Back ก็จะทำงาน
            CallApi(url, true, function (JSON_DATA) {
                var data = JSON.parse(JSON_DATA);//convert data Json

                if (data.length > 0) {

                    $('#tbResult').show();

                    $("#tbResult > tbody:last").children().remove();

                    for (var key in data) {
                        if (data.hasOwnProperty(key)) {

                            var TrTempplate = "<tr>";
                            TrTempplate += "<td>";
                            TrTempplate += data[key].name;
                            TrTempplate += "</td>";

                            TrTempplate += "<td>";
                            TrTempplate += data[key].gender;
                            TrTempplate += "</td>";

                            TrTempplate += "<td>";
                            TrTempplate += data[key].Age;
                            TrTempplate += "</td>";

                            TrTempplate += "</tr>";

                            $('#tbResult> tbody').append(TrTempplate);
                        }
                    }

                }

            });

        }

        //เรียก Data มาใช้
        function CallApi(url, async, callBack) {
            $.ajax({
                url: url,
                type: "GET",
                data: "{}",
                contentType: false,
                cache: false,
                processData: false,
                async: async,
                beforeSend: function (jqXHR, settings) {
                    // console.log(jqXHR.progress)
                },

                success: function (msg) {
                    output = msg;

                    return callBack(msg); //ใช้การ CallBack เพื่อให้รองรับ async และไม่ async
                }
                , error: function (jqXHR, textStatus, errorThrown) {
                    //fix bug error not set false

                }
                , complete: function (jqXHR, textStatus) {

                }
            });  //.ajax

        }
    </script>
</head>
<body>
    <table id="tbResult" class="" style="display: none;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

Code ด้านบนเป็น ดึงค่ามาจาก

http://www.javascriptthai.com/AppDesign/TemplateEngine/ApiService/DataApiSample.php

ตัวอย่างค่า

[{“name“:”Jonathan Suh”,”gender“:”male”,”Age”:30},{“name“:”William Philbin”,”gender“:”male”,”Age“:30},{“name“:”Allison McKinnery”,”gender“:”female”,”Age“:30}]

Data ประกอบไปด้วยชื่อ เพศ และ อายุ มาแสดงเป็น Table ผลลัพธ์ก็ตามด้านล่างครับ

link ผลลัพธ์

http://www.javascriptthai.com/AppDesign/TemplateEngine/TemplateEngine.html

ซึ่งก็สามารถใช้งานได้ดีนะแต่ปัญหามัน อยู่ตรง Code ด้านล่าง

TableTemplate

ซึ่งใช้เทคนิคการต่อ String ซึ่งถ้าหากมีการแก้ไข และ Tag ที่มันสับซ้อนมากๆ  มันจะทำให้ Code ของเรานั้นแก้ไขได้ยาก ผมเลยมีวิธีใหม่ๆ มานำเสนอให้เพื่อนๆ กันครับวิธีนั้นก็คือการใช้  Template Engine เข้ามาช่วย โดยเจ้าตัว Template นั้นก็มีหลายตัวด้วยกัน ขอยกตัวอย่างเช่น

  1. Mustache
  2. Underscore Templates
  3. Embedded JS Templates
  4. HandlebarsJS
  5. Jade templating

แต่ในที่นี้ผมขอเลือกใช้  Mustache Template ซึ่งเจ้าตัว Mustache Template  นี้สามารถใช้งานได้หลายภาษาเช่น Ruby, JavaScript, Python, Erlang, node.js, PHP, Perl, Perl6, Objective-C, Java, C#/.NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, Haskell, XQuery, ASP, Io, Dart, Haxe, Delphi, Racket, Rust, OCaml, Swift, Bash, Julia, R, Crystal, Common Lisp, and for Nim (https://mustache.github.io/)

Code ที่ใ้ช้ Template Mustache แทนการต่อ String

<!DOCTYPE html>
<html>
<head>
    <title>TemplateEngineMustacheOffLine</title>
    <meta charset="utf-8" />

    <style>
        table {
            background: #34495E;
            color: #fff;
            border-radius: .4em;
            overflow: hidden;
            width: 100%;
        }

        tr {
            border-color: #34495E;
        }

        th, td {
            margin: .5em 1em;
            text-align: center;
        }

            th, td:before {
                color: #dd5;
            }
    </style>

    <script src="jquery-2.1.4.min.js"></script>
    <script src="mustache.js"></script>
    <script>

        $(document).ready(function () {

            RenderTable(); //สั่งวาด  Table  
        });

        function RenderTable() {
            var url = "/AppDesign/TemplateEngine/ApiService/DataApiSample.php";

            //เรียก Data แบบ async และเมื่อเกิด function Call Back ก็จะทำงาน
            CallApi(url, true, function (JSON_DATA) {
                //สำหรับ Test
                //var data = [{ "name": "Jonathan Suh", "gender": "male", "Age": 30 }, { "name": "William Philbin", "gender": "male", "Age": 30 }, { "name": "Allison McKinnery", "gender": "female", "Age": 30 }];
                var data = JSON.parse(JSON_DATA);//convert data Json

                if (data.length > 0) {

                    var template = $('#MasterTemplate').html();
                    Mustache.parse(template);   // optional, speeds up future uses

                    var msg = { UserData: data };

                    var rendered = Mustache.render(template, msg);

                    $('#itemContainer').html(rendered);

                }

            });

        }

        //เรียก Data มาใช้
        function CallApi(url, async, callBack) {
            $.ajax({
                url: url,
                type: "GET",
                data: "{}",
                contentType: false,
                cache: false,
                processData: false,
                async: async,
                beforeSend: function (jqXHR, settings) {
                    // console.log(jqXHR.progress)
                },

                success: function (msg) {
                    output = msg;

                    return callBack(msg); //ใช้การ CallBack เพื่อให้รองรับ async และไม่ async
                }
                , error: function (jqXHR, textStatus, errorThrown) {
                    //fix bug error not set false

                }
                , complete: function (jqXHR, textStatus) {

                }
            });  //.ajax

        }
    </script>
    <script id="MasterTemplate" type="x-tmpl-mustache">

        <table id="tbResult" class="">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                {{#UserData}}
                <tr>
                    <td>
                        {{name}}
                    </td>

                    <td>
                        {{gender}}
                    </td>

                    <td>
                        {{Age}}
                    </td>
                </tr>
                {{/UserData}}
            </tbody>
        </table>
    </script>
</head>
<body>
    <div id="itemContainer">
    </div>
</body>
</html>

Template จะอยู่ใน

<script id="MasterTemplate" type="x-tmpl-mustache">.........................</script>

และเนื่องการ Code ด้านบนได้มีการใช้ Ajax เรียก Service มาที่ Server แบบจริงหากเพื่อนต้องการทดสอบการใช้ Template ให้ใช้ Code ด้านล่างเพราะมีการจำ ลอง Data มาให้เลยครับ และหากต้องการเรียนรู้คำสั่งของ Templae ให้ดูคู่กับ Link ด้านล่างได้เลย

คู่มือการใช้ Template mustache

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <style>
        table {
            background: #34495E;
            color: #fff;
            border-radius: .4em;
            overflow: hidden;
            width: 100%;
        }

        tr {
            border-color: #34495E;
        }

        th, td {
            margin: .5em 1em;
            text-align: center;
        }

            th, td:before {
                color: #dd5;
            }
    </style>

    <script src="jquery-2.1.4.min.js"></script>
    <script src="mustache.js"></script>
    <script>

        $(document).ready(function () {

            RenderTable(); //สั่งวาด  Table
        });

        function RenderTable() {
           

            //สำหรับ Test
            var data = [{ "name": "Jonathan Suh", "gender": "male", "Age": 30 }, { "name": "William Philbin", "gender": "male", "Age": 30 }, { "name": "Allison McKinnery", "gender": "female", "Age": 30 }];
            //var data = JSON.parse(JSON_DATA);//convert data Json

            if (data.length > 0) {

                var template = $('#MasterTemplate').html();
                Mustache.parse(template);   // optional, speeds up future uses

                var msg = { UserData: data };

                var rendered = Mustache.render(template, msg);

                $('#itemContainer').html(rendered);

            }

        }

        //เรียก Data มาใช้
        function CallApi(url, async, callBack) {
            $.ajax({
                url: url,
                type: "GET",
                data: "{}",
                contentType: false,
                cache: false,
                processData: false,
                async: async,
                beforeSend: function (jqXHR, settings) {
                    // console.log(jqXHR.progress)
                },

                success: function (msg) {
                    output = msg;

                    return callBack(msg); //ใช้การ CallBack เพื่อให้รองรับ async และไม่ async
                }
                , error: function (jqXHR, textStatus, errorThrown) {
                    //fix bug error not set false

                }
                , complete: function (jqXHR, textStatus) {

                }
            });  //.ajax

        }
    </script>
    <script id="MasterTemplate" type="x-tmpl-mustache">

        <table id="tbResult" class="">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                {{#UserData}}
                <tr>
                    <td>
                        {{name}}
                    </td>

                    <td>
                        {{gender}}
                    </td>

                    <td>
                        {{Age}}
                    </td>
                </tr>
                {{/UserData}}
            </tbody>
        </table>
    </script>
</head>
<body>
    <div id="itemContainer">
    </div>
</body>
</html>

 

ซึ่งการใช้ Template เข้ามาช่วย มันจะช่วยทำให้ Code ของเราสามาถอ่านได้ง่ายละแก้ไขได้ง่ายมากยิ่งขึ้น เพราะเป็น Tag Html ตรงๆ เลย วันนี้ผมขอจบเพียงแค่นี้นะครับหากมีข้อสงสัยอะไรแจ้งที่ Comment ด้านล่างหรือทาง FaceBook ได้เลยครับผม

Mustache Template (ของ JavaScript)

 

Source

 

หวังว่าคงจะมีประโยชน์บ้างนะครับ