artTemplate实现三层菜单

artTemplate有原生语法和简洁语法两种语法，在一个页面中简洁语法与原生语法不能混用，否则会残生冲突，所以你首先得确定你要用简洁语法还是原生语法，最终选择一个js导入，同时导入两个js，会导致只识别简洁语法，两个js包可点击这里下载。这边通过一个例子介绍稍微复杂的一种数据类型List中存放Map，Map中再存放List。

var menu = [ {    menu_name : "电脑配件",    submenu : [ {        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ]}, {    menu_name : "电脑配件",    submenu : [ {        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ,{        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ]} ];

通过artTemplate来达到三层菜单的效果，样式问题这边就不介绍了

原生语法

原生语法比较类似于html中直接写java代码,将Java代码<%%>包裹，他的代码更加容易被理解，使用原生语法，需要导入template-native.js文件。需要该文件，可点击下载。

创建模板

<script type="text/html" id="leftMenuTemplate"><%for(var i = 0;i < menus.length;i++){%>    <li>        <div class='cyList'><%=menus[i].menu_name%></div>        <%for(var j = 0;j < menus[i].submenu.length;j++){%>            <dl class='cy-detail'>            <dt><%=menus[i].submenu[j].submenu_name%></dt>                <%for(var k = 0;k < menus[i].submenu[j].subsubmenu.length;k++){%>                    <dd><%=menus[i].submenu[j].subsubmenu[k]%></dd>                <%}%>            </dl>        <%}%>    </li><%}%></script>

渲染模板

<script type="text/javascript">var menu = [ {    menu_name : "电脑配件",    submenu : [ {        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ]}, {    menu_name : "电脑配件",    submenu : [ {        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ,{        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ]} ];var data = {        menus : menu    }var html = template("leftMenuTemplate", data);$("#leftMenu").html(html);</script>

简洁语法

简洁语法比原生语法更加清晰，它更加类似于AngularJs的写法，使用简洁语法，需要导入template.js文件。可点击下载。

创建模板

<script type="text/html" id="leftMenuTemplate">{{each menus}}    <li>        <div class='cyList'>{{$value.menu_name}}</div>        {{each $value.submenu}}            <dl class='cy-detail'>            <dt>{{$value.submenu_name}}</dt>            {{each $value.subsubmenu}}                <dd>{{$value}}</dd>            {{/each}}            </dl>        {{/each}}    </li>{{/each}}</script>

在这边需要使用到each标签的多重循环（嵌套），将第一重循环得到的list作为第二重循环的条件
注意：

{{each menus}}也可以写成{{each menus as value index}}，value代表值，index代表索引。当不写 as value index，默认也是value和index，但是书写时必须加上$，而写完整时，不能加，否则会报错

渲染模板

<script type="text/javascript">var menu = [ {    menu_name : "电脑配件",    submenu : [ {        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ]}, {    menu_name : "电脑配件",    submenu : [ {        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ,{        submenu_name : "电脑整机",        subsubmenu : [ "笔记本", "台式一体机", "游戏本", "商务本" ]    } ]} ];var data = {        menus : menu    }var html = template("leftMenuTemplate", data);$("#leftMenu").html(html);</script>

使用这两种方法都能达到实现上图三级菜单的效果，不过我更推崇第二种，看起来更加清晰。
最后谈谈一些问题，因为我做的项目是并没有后台存在，所以我们以getJSON的方式来请求本地数据，但是出现了跨域问题，最后参考这篇文章，对浏览器进行了配置实现了本地数据的请求