Template-Web基本概念

最新推荐文章于 2021-09-19 19:58:56 发布

牛奶味的辣椒水

最新推荐文章于 2021-09-19 19:58:56 发布

阅读量714

点赞数

分类专栏：全栈前端文章标签：过滤器 javascript js

本文链接：https://blog.csdn.net/qq_41469636/article/details/108317142

版权

全栈前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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:[]};
    要求：后台服务器fastjson帮助我们将需要展示的数据，转换成json字符串
          能够看到json数据

3> 制定模版

    <script id="模版的唯一标识"  type="text/html">
          在这个里面制定模板
    </script>
    
   <template id="模板的唯一标识">
          在这个里面制定模板
   </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}}

牛奶味的辣椒水

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Template-Web基本概念

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:[]}; 要求：后台服务器fastjson帮助我们将需要展示的数据
复制链接

扫一扫

专栏目录