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的方式来请求本地数据，但是出现了跨域问题，最后参考这篇文章，对浏览器进行了配置实现了本地数据的请求