template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。

特性:

  • 模版编译,渲染

  • 支持所有主流浏览器及Node(UMD)

  • JavaScript原生语法

  • 可自定义配置

  • 支持数据过滤

  • 功能专一,简单好用

兼容性:

  • Node 0.10+

  • Safari 6+ (Mac)

  • iOS 5+ Safari

  • Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)

  • Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)

  • Internet Explorer 6+ (Windows, Windows Phone)

  • Opera 10+ (Windows, linux, Android

编写模版

使用一个type="text/html"的script标签存放模板,或者放到字符串中:

<script id="tableViewTemple" type="text/html">

<ul>

{{each datas as value i}}

<li>{{value.name}}</li>

{{/each}}

</ul>

</script>

填充模板

var userlist = document.getElementById('userlist');

userlist.innerHTML = template('tableViewTemple', {datas: [{name: "张三"},{name: "李四"},{name: "王五"}]});

输出结果:

<ul>

<li>张三</li>

<li>李四</li>

<li>王五</li>

</ul>

Hbulider里面template模板自用的更多相关文章

  1. angularjs指令系统系列课程(2):优先级priority,模板template,模板页templateUrl

    今天我们先对 priority,template,templateUrl进行学习 1.priority 可取值:int 作用:优先级 一般priority默认为0,数值越大,优先级越高.当一个dom元 ...

  2. ArcGIS API for Silverlight代码中使用Template模板

    原文:ArcGIS API for Silverlight代码中使用Template模板 在项目开发中,会遇到点选中聚焦闪烁效果,但是因为在使用Symbol的时候,会设置一定的OffSetX和OffS ...

  3. Git commit template 模板设定

    多人协作开发一个项目时,版本控制工具是少不了的,git是linux 内核开发时引入的一个优秀代码管理工具,利用它能很好使团队协作完成一个项目.为了规范团队的代码提交,也方便出版本时的release n ...

  4. 一个简单地template模板

    之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地t ...

  5. 小程序开发--template模板

    小程序的template模板可以说是我遇到的最简单的了,看看实例: <template name="article"> <view class='containe ...

  6. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

  7. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  8. 微信小程序新闻列表功能(读取文件、template模板使用)

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  9. spring框架学习(六)AOP事务及spring管理事务方式之Template模板

    概念 1.事务 1)事务特性:ACID 原子性 :强调事务的不可分割. 一致性 :事务的执行的前后数据的完整性保持一致. 隔离性 :一个事务执行的过程中,不应该受到其他事务的干扰. 持久性 :事务一旦 ...

随机推荐

  1. 大数据应用日志采集之Scribe 安装配置指南

    大数据应用日志采集之Scribe 安装配置指南 大数据应用日志采集之Scribe 安装配置指南 1.概述 Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它 ...

  2. Android消息推送之GCM方式(一)

    <声明> 转载请保留本来源地址: http://blog.csdn.net/wzg_1987/article/details/9140371 首先,你需要使用一个谷歌账号登录谷歌Api控制 ...

  3. 利用jquery对ajax操作,详解原理(附代码)

    1. jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selecto ...

  4. 交流希望希望能得到一些大神的指点,加QQ群:249627436 java技术交流群

    查了好多资料,发现还是不全,干脆自己整理吧,至少保证在我的做法正确的,以免误导读者,也是给自己做个记录吧! 本人学习java,1年多,对一些基本技巧已掌握.为了使自己能力晋升建了一个QQ群:java交 ...

  5. 用scikit-learn研究局部线性嵌入(LLE)

    在局部线性嵌入(LLE)原理总结中,我们对流形学习中的局部线性嵌入(LLE)算法做了原理总结.这里我们就对scikit-learn中流形学习的一些算法做一个介绍,并着重对其中LLE算法的使用方法做一个 ...

  6. Java 使用httpclient Post与cxf 发布的Webservice通信

    使用cxf发布的webservice不知道什么情况总会有时管用有时不管用,对于项目来说这肯定不行.又不想改动webservice因为代码太多.人懒! 于是便使用httpclient与webservic ...

  7. CSS3样式linear-gradient的使用

    linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...

  8. SQL SERVER BUG--Alwayson日志备份报错

    数据库版本 SQL SERVER 2012 企业版,版本号:11.0.5582.0 问题场景: 数据库配置Alwayson环境,同机房2节点同步自动切换+跨机房异步,在异步机房中选取同一节点做完整备份 ...

  9. VSFTP服务——实验

    一.VSFTP 作用:提供文件共享服务,可以应用在互联网中,实现外地登录服务器下载公司文件的功能,不区分客户端,在windows和linux中都是可以使用的 1.安装vsftpd [root@Serv ...

  10. svg动画学习

    首先我们定义一块画布,然后在上面画一个圆形. 他看起来应该是这个样子的:(每一个实例我都会附加图片以及demo链接,方便直观的理解与源代码的查看,查看的时候请使用标准浏览器) 点击查看Demo 现在我 ...