简单高效地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）就行了。