黑马程序员技术交流社区

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

---

作者: 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