jquery.tmplate模板引擎使用心得

jquery.tmpl.js，是與jquey共同使用的html模板插件。該插件可通過簡單的語法將數據放入到html模板中，可以很好的將數據渲染到頁面上。該插件在本項目中使用較多且網上的講解比較分散，無系統的api以及使用方法可以查詢，故將jquery.tmpl.js的api整理出來，以方便大家使用。
        在使用之前一定要先加載jquery，並把jquery.tmpl.js加載進來
        一、目前使用比較多的api如下：
        1、判斷類語法
                1).{{if}}語法
                        該語法很好理解與使用。主要用作判斷。在{{if}}中加入判斷條件，如果滿足該條件就會執行之後的函數，否則就不會執行。舉個例子：
                                {{if a == 10 }}
                                        <p>例子</p>
                                {{/if}}
                                在該例子中，只有當a = 10 的情況纔會出現頁面中才會出現<p>例子</p>這個標籤，否則不會；另外一點，就是在使用jquery.tmpl.js的api的時候，一定要有閉合，如例子所示，一定要使用{{/if}}來對上面語法進行閉合，否則無法實現該語法；
                        切記：一定要閉合；
                2).{{else}}語法
                        既然存在{{if}}語法了，肯定也是會存在{{else}}語法的了，該語法的作用是在不滿足在{{if}}中條件的時候才需要{{else}}語句，與javascript的語法很形似，同時，{{else}}語句與{{if}}語句同時存在。舉個例子：
                                {{if a == 10}}
                                        <p>例子一</p>
                                {{else}}
                                        <p>例子二</p>
                                {{/if}}
                                在例子中，只有當 a = 10 的時候，頁面中才會出現標籤<p>例子一</p>，否則會出現標籤<p>例子二</p>，
                                在{{if}}之中是一定需要{{/if}}標籤來閉合的，但是{{else}}是不需要書寫閉合的。
                3).${}語法
                        該語法主要用於簡短的判斷，一般適用於三目運算符。主要爲 a==b ? a1 = 1: a1 = 2;  該語法也是用於判斷是否符合條件，如果符合則執行前面的,否則會執行後面的；同時該語法內可以直接書寫三目運算符。舉個例子：
                        <span>${a ? 10 : 20}</span>
                                該段語法的意思爲如果a存在，則<span></span>標籤內的數據爲10.否則爲20；
        2、循環類語法
                4).{{each}}語法
                        該語法與javascript類似，起到循環的作用，可以對其後的數據進行遍歷，然後將遍歷的數據進行一系列的操作,另外從each中取得數據時經常與${}混合使用。同時，該語法也是需要進行閉合的。舉個例子:
                                {{each(key,value),arr}}
                                        <li>${value}</li>
                                {{/each}}
                                該段語法的作用爲將arr進行遍歷，並將其中每個屬性的value放入到li中，同樣，each語法也是需要閉合的。
        3、使用類語法
                $(selectpr).tmpl(data)
                $(selector)爲選擇到的html模板，tmpl()之中的data就是所要傳入html模板的數據；舉個例子：
                        <div>
                                {{if data}}
                                        <ul>
                                                {{each(index,value) data}}
                                                        <li class='${index.className}'>${index}</li>
                                                {{/each}}
                                        </ul>
                                {{/if}}
                                <span>{rows.data}</span>
                        </div>

                        將上部文件作爲html模板時在js中使用

                        使用：$(html模板的名字).tmpl(res);

                        實際上res爲{
                                "data":[12,23,12,12],
                                "rows":{'data':'1212121'},
                                "message": 0
                        }
                        主要就是tmpl中的是數據，而且傳過去的數據就可以直接在裏面獲取相應的值，然後對值進行操作。

        以上語法基本爲在項目中使用較多的，其餘還有一些api，包括{{html}}、{{wrap}}等，但是使用範圍並不廣，故不多做介紹。
二、以上爲日常開發使用模板中使用較多的api。jquery.tmpl.js在好用的同時也存在一些缺陷，其中比較明顯的就是，
        1、"="問題
        將變量賦值作爲模板放入標籤之中後，如果其中存在=的話，一定要在=的左右兩邊全部加上空格，否則會出現很多比較詭異的現象

三、結語：
        該文章爲本人純手碼，將知識整理並彙總，希望看到的小夥伴能從中得到一些收穫；
                                                                                                                                                        ------------@pandaClose