artTemplate 模板引擎 :
基本代码模式:
1,引入相关模板引擎文件(template-native.js或template.js)
2,建立模板,代码形式类似如下:
<script type="text/template" id="模板ID">
这里写具体的模板代码,其实就是 html代码 和 模板代码 的混编结构
</script>
说明:
原生语法的边界符:<% %>; 输出表达式:<%=content%>;
简洁语法的边界符:{{ }}; 输出表达式:{{content}};
3,使用template()函数将数据传入到模板,会得到纯html代码:
var html = template("模板ID", 对象数据);
注意:如果是对象,直接传入,如果是数组,包装为对象再传入。
如果我们要操作一个数组,有两种做法:
一、$data直接就代表传过来的数据本身(整体)
<script id="xxID" type="text/template"> 模板中可以这样:{{$data}} //代表整体数据 也可以这样:{{name}} //代表数据中的name这项的值 </script> var obj1 = {name: 'jack',age:18} var html = template("xxID", obj1); ---------------------------------------------------- <script id="xxID" type="text/template"> {{each$data val}} //$data代表整体,这里是一个数组 。。。。{{val.name}}.....{{val.age}} {{/each}} </script> var obj2 = [ {name: 'jack',age:18} , {...}, {...} ]; //是一个数组
var html = template("xxID",obj2);
二、把数组包装成一个对象: <script id="xxID" type="text/template"> {{eachaha val}} //这个aha代表传过来的数据的aha这一项的值,即我们需要操作的数组 姓名:{{val.name}} 年龄:{{val.age}} {{/each}} </script> var obj3 = [{name: 'jack',age:18} , {...} ,{...} ]
var html = template("xxID", { aha:obj3 });
|