簡單高效地JavaScript模板引擎——artTemplate

artTemple是一個簡單高效地JavaScript模板引擎，相比於jsRender這種複雜的模板引擎，artTemple就顯得很「嬌小」。你幾乎能夠在網上任意搜一篇博客或者文章，10分鐘的時間你就能基本的掌握它得用法（附上網站：http://www.jq22.com/jquery-in...）。有興趣的朋友能夠本身去這個網站上看，裏面都有其的特性啊，一些經常使用的api和例子。

寫這篇文章只是爲了說明一下本人在使用jsRender和artTemple時候發現它們之間的一個小差異想和你們分享一下：

首先，給出渲染數據：

var data = {
                        title: '標籤',
                        list: [
                            {
                               itemTitle:科目,
                               dataItem:['語文','數學']
                            }
                        ]
                      };
   在artTemple中渲染模板：
     <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引 {{i + 1}}</li>
                {{each value.dataItem as item j}}
                   <span>{{j+1}}:{{value.itemTitle}}</span>
                {{/each}}
            {{/each}}
        </ul>
      </script>

用過jsRender的朋友們會有個挺揪心的問題就是在嵌套數組數據中，怎麼在dataItem數組循環中引用與dataItem同級或者之上幾級的數據。jsRender中就須要使用#parent屬性一步一步的去計算出所須要引用的數據相對於dataItem的級數，而後才能正確引用。由於在jsRender的數組引用中那個沒有相似於artTemple模板數組引用中的數組子項說明（上面例子中的value或者item）。在artTemple中要實如今dataItem數組循環中引用與dataItem同級或者之上幾級的數據就簡單多了，只需如上述例子中同樣，綁定數組子項（value）就好了。