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帮助我们将需要展示的数据，转换成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}}

Template-Web相关推荐

CM: word template web service schema number的限制
Created by Jerry Wang, last modified on Aug 21, 2014 note 2045119 - Document template could only con ...
swagger: fetching resource list: http://localhost:8080/template/v2/api-docs?group=springboot-templat
引入的swagger版本: <dependency><groupId>io.springfox</groupId><artifactId>springf ...
php 微信定位源码_微信活码模块源码 - WEB源码|PHP源码|源代码 - 源码中国
压缩包 : 微信活码模块源码V3.8.0(SG11加密,学习用).zip 列表打死都要看的说明.txt addons/ addons/nx_livecode/ addons/nx_livecode/ ...
Web Components 学习 01 认识 Web Components、一些组件库使用
什么是 Web Components 开发项目的时候为什么不手写原生 JS,而是要用现如今非常流行的前端框架,原因有很多,例如: 良好的生态数据驱动试图模块化组件化等 Web Componen ...
超过 25 个华丽的 Web 日历组件【多图慎入】
Web 应用上经常需要用到日历组件,例如生日选择.日程提醒.日期相关设置等等,下面是超过25个的界面非常华丽的日历组件. Calendar PSD Template Web Icon Calendar ...
会所网站php源代码,anmo 按摩休闲会所网站模板，全套包含近20个HTML 页面，web制作源码。 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: anmo下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 4797 KB 上传时间: 2013-12-27 下载次数: 5 提供者: 烟鸭掌儿详细 ...
超越文档类型,web标准化向前兼容和IE8
FROM :http://help.powereasy.net/Template/WEB/1608.html 进步总是要有代价的. 对网页浏览器来说, 由于开发者像是宣传真理一样的拍着胸部担保着一些编 ...
DevOps - Spring Boot自动部署到WebLogic
前言想想,如果Spring Boot的项目在本地IDEA可以直接通过内嵌tomcat的jar运行,而只要往GitHub上提交代码,就能自动帮你打包成war包部署在项目组的WebLogic服务器上,该 ...
浅谈Sharepoint权限
基于Sharepoint做一个客户管理的系统,由于客户方对权限的要求非常严格,所以不得不自己去定义网站的权限,好在Sharepoint提供的权限系统比较完善,我们所创建的权限包括从创建SPWeb到创建 ...
25 个精美的后台管理界面模板和布局
任何系统都会有一个管理后台,好看的管理后台看起来赏心悦目,管理的时候心情也舒畅,本文给大家推荐 25 个制作精美的后台管理界面的模板和布局,你值得拥有. Free Admin Template Web ...

Template-Web

Template-Web相关推荐

最新文章

热门文章