Template模板方法的使用

最新推荐文章于 2025-05-23 06:00:00 发布

置顶豆芋

最新推荐文章于 2025-05-23 06:00:00 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery templates

本文链接：https://blog.youkuaiyun.com/compruterlearner/article/details/108317523

前端专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何利用art-template和jQuery进行模板渲染。文章详细阐述了模板渲染的步骤，包括引入js文件、准备json数据、制定模板、渲染过程以及如何处理if条件、循环、打印和转义问题。此外，还特别提到了模板中嵌套子模板和自定义过滤器的功能，并给出了在jsp上创建用户列表界面的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

art-template模板渲染HTML
该方法的核心思想就是将json数据传入按照art-template模板编写模板中去。

1> 引入js文件

   	<script src="./js/template-web.js" type="text/javascript" charset="utf-8"></script>

2> 准备json对象

    例如： var obj1 = {teams:[]};
               var obj2 = {arr：[a,b,c,d,e]};
    要求：后台服务器fastjson帮助我们将需要展示的数据，转换成json字符串
          能够看到json数据

3> 制定模版

    <script id="模版的唯一标识"  type="text/html">
           /*模板例子如下*/
                {{a}}
                {{b}}
                {{c}}
          在这个里面制定模板
    </script>
    
   <template id="模板的唯一标识">
     /*模板例子如下*/
                {{a}}
                {{b}}
                {{c}}
          在这个里面制定模板
   </template>

4> 渲染

  <script type="text/javascript">
          /*找到你想要操作的块*/   
  	var showDiv = document.querySelector("#id选择器");
  	   
  	//template(模版的id,json格式的对象);
  	 /*在那个块中键入*/
  	showDiv.innerHTML = template("模版的唯一标识", json对象名);
  </script>
  
  // 基于模板名渲染模板
  template(filename, data);
  filename: 对于模板的script标签的id;
  data: js获取的数据（一般是后端返回的序列化json字符串）

5> 常用语句

输出


    {{value}}             // 目前最常见的双花括号数据绑定
    {{data.key}}       // 对象点方式
    {{data['key']}}    // 另外一种对象处理方式
    {{a ? b : c}}       // 三元运算
    {{a || b}}           // 或运算  防止 undefined 报错
    {{a + b}}          // 并列输出
    {{$data['list']}}

if 选择


{{if flag == '1'}}
     展示的内容
{{else if flag == "2"}}
     展示的内容
{{else}}
     展示的内容
{{/if}}

循环

 注意：
 target 支持 array 与 object 的迭代，其默认值为 $data。
 $value 与 $index 可以自定义：{{each target val key}}。
  -- stuArray 是json中属性名 
  -- 没有设置别名的时候  {{$index}} 索引  {{$value}}获取数组中值
  -- stu是别名，可以修改
  -- index 数组的索引，从0开始
  {{each stuArray  stu index}}
       {{stu}} 
 	  {{stu.name}}
 	  {{index}}
  {{/each}}
  
  -- json属性的值，就是一个值，不是对象，也不是数组
  {{json的属性名}}

打印 print

   <script>
      var obj={ a: 'hello', b: '--world', c: '--!!!'};
   </script>

   <template id="mb1">
        {{print a b c}}
   </template>

转义问题

    <template id="mb">
    	显示文本：   {{userImg}}
    	<hr>
    	显示图片:    {{@userImg}}   或者   {{#userImg}} 
    </template>
    
    <script type="text/javascript">
    	 var obj={userImg:"<img src='./img/1.jpg'>"}
    	 document.querySelector(".show").innerHTML=template("mb",obj);
    </script>

模板中可以嵌入子模版


   {{include '另外一个模版的id' 参数值}}
   <template id="template1">
   <ul class="artists">
   		 {{each artists  singer index}}
   		  <li>
   			 {{index+1}}
   			 <br>
   			 {{singer.name}}
   			 <br>
   			 {{include 'mb' singer}}
   		 </li>
         {{/each}}
   </ul>
  </template>
   <template id="mb">
   <!-- <img src="{{img1v1Url}}" width="80px"> -->
          {{id}}
   </template>

自定义过滤器

    // 定义变量
   template.defaults.imports.log = console.log;
   使用变量
   <% $imports.log('hello world') %>  == console.log('hello world')
   
   自定义过滤器定义函数
   template.defaults.imports.方法名 = function ( 参数 ) {
   
   }
   
   然后在模版中使用这个过滤器
   <span>{{json属性名 | 自定义过滤器方法名}}</span>
   <span>{{参数1|自定义过滤器方法名:参数2,参数3,... }}</div>

  <!DOCTYPE html>
  <html>
  	<head>
  		<meta charset="utf-8">
  		<title></title>
  	</head>
  	<body>
  		<div class="show">
  			
  		</div>
  		
  		<script src="./js/template-web.js" type="text/javascript" charset="utf-8"></script>
  		
  		<template id="k1">
  			  {{each sexList  sex}}
  			        {{sex|sexinfo}}  <br>
  			  {{/each}}
  		</template>
  		
  		<script type="text/javascript">
  			//自定义验证器在，js代码中写
  			template.defaults.imports.sexinfo=function(sex){
  				return sex==1?"男":"女";
  			}
  			
  			//定义一个json对象
  			var jsonObj={"sexList":[1,0,1,1,1,0]};
  			
  			//渲染模板
  			document.querySelector(".show").innerHTML=template("k1",jsonObj);
  			
  		</script>
  		
  	</body>
  </html>

定义变量

   {{set temp = data.sub.content}}

新加：（使用jquery函数库可以帮助我们快速的写出模板）

下面是一个例子（在jsp上写出用户列表界面）
下面是用户界面。在页面上显示出来的东西都用下面的html代码编写。
在这里插入图片描述 tempalte模板正餐时间：
1.首先，我们先引入jquery模板和tempalte模板。

2.其次，在用页面加载完成之后调用显示方法。其中

	<script type="text/javascript">
	function showListData() {
//		参数一：url   参数二：页面传递的servlet的值    参数三：回调函数，servlet传递给页面的值
			//参数四：返回的数据类型
			//$.post的意思是访问servlet的post方法。
			$.post(
					//参数一：url 
					"user?type=userList", 
					//参数三：回调函数	data是servlet传给页面的json数据	
					function(data) {
				    //被渲染的数据  
				       var jsonObj = 
	   //json的标准模式 { key：value }； 通过key属性值可以查询到value
	   //也可以称之为建立一个引用userList指向有servlet传过来的数据data；
				       {userList : data};
		//通过标签名定位到 （想要写数据的块或者是表中）
		//然后利用jquery封装的html方法渲染template模板
				       $("#user_table>tbody").html(
// 是根据模板名来渲染模板。 template（"模板名或者是模板id"，servlet传过来json对象）		    		   
						template("userList_template", jsonObj))

			      },
			//参数四：返回的数据类型
			'json');
		}
		</script>

3.编写template模板：

	<script id="userList_template" type="text/html">
<!--调用each方法遍历userList  （上面的json对象，再给它一个自定名，最后如果有需要还可以
给它定义一个索引）-->
              {{each userList user}}
               <tr>
                    <td>{{user.userId}}</td>
                       <td>{{user.userName}}</td>
                       <td>{{user.userPwd}}</td>
                       <td>{{user.userPhone}}</td>
	<!-- 在使用src指向时必须添加双引号“”还有json格式的{{}} -->
                       <td><img src="{{user.userImg}}" width="50px" ></td>
                       <td>
                      {{if user.userFlag==0}}
                                   普通用户
                    {{else}}
                                    管理员
	<!--千万不要忘记在if语句结尾时给它添加{{/if}}  -->
                  {{/if}}
                       </td>
                    <td>
                       <a href="javascript:void(0);" id="uploadbtn">修改</a>
                    <a href="javascript:void(0);" id="uploadbtn">删除</a>
                   </td>
   </tr>
	<!--千万不要忘记在each语句结尾时给它添加{{/each}}  -->
{{/each}}
</script>