前端模板引擎artTemplate:template()方法

责编:menVScode 2017-07-16 17:24 阅读(491)

       template(id, data)

        id:必传,渲染模板的id。data:可选,一个Object对象。传data渲染完成html代码;不传data返回一个渲染函数。       

案例一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>art-template</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src='./template-web.js'></script>
	 <script id="test" type="text/html">
        <%= title %>
        <ul>
            <% for( var i=0;i<list.length;i++ ){ %>
            	<li><%= list[i] %></li>
            <% } %>
        </ul>
     </script>
     <script>
         var data = {
            title:'水果',
            list:['苹果','榴莲','山竹','无花果','凤梨']
        };
        var html = template('test',data);
        document.getElementById('app').innerHTML=html;
     </script>
</body>
</html>

案例二

//代码内容同上
....
var html = template('test');
.....

不传入第二个参数的时候,将返回一个函数

function ($data){ 'use strict' $data=$data||{} var $out='',$escape=$imports.$escape,title=$data.title,i=$data.i,list=$data.list $out+="\n " $out+=$escape(title) $out+="\n
\n " for( var i=0;i

依据上面的案例,我们可以这样理解template()方法:
  1、传入的第二个参数,作为模板里面的一个全局对象。
  2、取这个对象的某个属性,只需直接调用属性名即可,例如:list就是data的一个属性。
  3、第二个参数只能传对象,不能传数组。当拿到一个数组的进行遍历的时候,需要自己初始化一个对象,用一个属性和数组进行映射。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码