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. Javascript单元测试框架比较Qunit VS Jasmine

    Javascript单元测试框架比较Qunit VS Jasmine 工欲行其事必先利其器,好的单元测试框架是TDD成功的一半.Javascript优秀的测试框架很多, 包括Jasmine,Qunit ...

  2. DRP项目总结

    DRP项目在6号就已经完工了,总共花费了一个半月的时间,从对java的懵懵懂懂,到现在的略微熟悉,对整个java web开发的认知,清晰了很多.涉及到的web项目开发的必备知识,也都有一次得到锻炼和提 ...

  3. HDU 2073 无限的路

    Problem Description 甜甜从小就喜欢画图画,最近他买了一支智能画笔,由于刚刚接触,所以甜甜只会用它来画直线,于是他就在平面直角坐标系中画出如下的图形: 甜甜的好朋友蜜蜜发现上面的图还 ...

  4. linux内核skb操作

    1,struct sk_buff数据结构 struct sk_buff{ //这两个结构必须放在最前面 struct sk_buff *next; struct sk_buff *prev; stru ...

  5. Integer.parseInt(String s, int radix)方法介绍(修正版)

    先来说明一下Integer.parseInt(String s, int radix)的功能. Integer.parseInt(String s, int radix)就是将整数字符串s(radix ...

  6. HNCU1324:算法2-2:有序线性表的有序合并(线性表)

    http://hncu.acmclub.com/index.php?app=problem_title&id=111&problem_id=1324 题目描述 已知线性表 LA 和 L ...

  7. cpu组相连映射

    组相联映射方式 组相联映射方式 是全相联映射方式和直接相联映射方式的结合,结合两者的优点 · 方法:把Cache分为若干组,每组含有若干行. 组间直接映射,组内全相联映射. (图7) · 映射过程:( ...

  8. Unity中使用协程进行服务端数据验证手段

    近期在做项目中的个人中心的一些事情,用户头像上传,下载,本地缓存,二级缓存,压缩,这些都要做,麻雀虽小五脏俱全啊,也是写的浑浑噩噩的, 当我们在上传用户头像的时候,向服务端发送上传头像请求之前,一般都 ...

  9. 用C++实现的八皇后问题

    我是一个C++初学者,控制台实现了一个八皇后问题. 代码如下: //"八皇后问题"V1.0 //李国良于2017年1月11日编写完成 #include <iostream&g ...

  10. Docker集群实验环境布署--swarm【1 架构说明】

    在读完<Docker技术入门与实践>这本书后,基本上已对Docker了有一些入门的理解,以及我们为什么要使用Docker 答:我们发现在实际工作中,通过openstack一旦把一个VM创建 ...