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. openbr on linuxmint13/ubuntu12.04/debian7 x64 facial recognition [Compile from source!!!]

    Openbr is a great project for facial detecting. System: linuxmint 13 x86_64 Face recognition,  motio ...

  2. ssh三大框架,三层架构 整合测试!完整分页代码,JdbcTemplate等测试,存储过程调用,留着以后复习吧

    下载地址:http://download.csdn.net/detail/liangrui1988/5760453

  3. 刨根问底儿 -- intVal($str) 跟 (int) $str 的运算结果有什么区别

    intVal($str) 跟 (int) $str 都是把其他类型的变量转化为int型变量的方式,这么多年来我一直森森滴怀疑它们的运算结果在某些条件下会有区别.对于我的疑问,文档里也没有多说(或者我没 ...

  4. java.lang.IllegalArgumentException: Wrong FS ...异常的解决

    配置完Hbase后,启动,JPS发现少了HMaster这个进程.查看了一下日志如下: java.lang.IllegalArgumentException: Wrong FS: hdfs://192. ...

  5. Javascript使用postMessage对iframe跨域通信

    今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...

  6. 0-ajax操作json(番外篇)

    [可以先看后边再看此文] get获取json 前端代码 <!DOCTYPE html> <html> <head> <meta charset="u ...

  7. PHP定义静态方法的原则

    与实例逻辑无关 与类逻辑有关 静态类本质上跟纯函数没区别. 1.static方法是类中的一个成员方法,属于整个类,即使不用创建任何对象也可以直接调用! 2.静态方法效率上要比实例化高,静态方法的缺点是 ...

  8. Hololens文件读写

    unity 内勾选 RemovableStorage 选项或 Package.appxmanifest 勾选 可移动存储 选项 uwp app IO操作用 StreamReader 会提示没有权限,如 ...

  9. Tiny6410之NAND FLASH驱动

    一.NAND FLASH的特点 S3C6410的NAND FLASH控制器有如下特点 1.自导入模式:复位后,引导代码被送入到8KB的STEPPINGSTONE中,引导代码移动完毕,引导代码将在STE ...

  10. bind() unbind()绑定解绑事件

    .bind( eventType [, eventData], handler(eventObject)) 本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: .B ...