黑马程序员技术交流社区

标题: 模板引擎 [打印本页]

作者: Zo.    时间: 2019-6-8 20:08
标题: 模板引擎
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 });






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2