JavaScript 模板引擎 template.js

MIT
JavaScript
跨平台
2015-01-25
颜海镜

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="tpl" type="text/html">
<ul>
    <%for(var i = 0; i < list.length; i++) {%>
    <li><%:=list[i].name%></li>
    <%}%>
</ul>
</script>

渲染模板

var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

输出结果:

<ul>
    <li>yan</li>
    <li>haijing</li>
</ul>
加载中

评论(4)

天坑健
我有一款更好的javascript模板引擎 https://my.oschina.net/u/3994041/blog/2244784
颜海镜
颜海镜 软件作者
大家有问题,可以来github提issue
快乐的单身汉
正在用template.js,有个问题。style的里面背景图片属性的值怎么设置不了?

暂无资讯

1
回答
比handlebars.js有何优势

比handlebars.js有何优势

2016/12/21 09:12

没有更多内容

加载失败,请刷新页面

没有更多内容

npm 创建cli项目

package.json { "name": "js-w4-v2", "version": "1.0.15", "description": "Auto webpack4 + vue2 project template", "main": "index.js", "bin": { "js-w4-v2": "./index.js" }, "reposit...

2018/08/24 18:03
17
0
JEECG 上传插件升级-Online

前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此插件上传支持多种模...

2018/09/07 15:54
38
0
Practice Backbone.js with PHP :: Example 1

环境Mac OS X, PhpStorm9, MAMP3.4(php5.6)

2015/11/19 19:38
57
0
requests_html和pyquery的结合使用

from pyquery import PyQuery from requests_html import HTMLSession import json import logging from concurrent.futures import ProcessPoolExecutor logging.basicConfig(filename="", ...

2018/10/25 15:39
12
0
JEECG 上传插件升级-Online

前言:现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此插件上传支持多种模...

2018/08/28 14:44
187
0
scope绑定策略

@:把当前属性作为字符串传递。你还可以绑定来自外层的scope的值,在属性值中插入{{}}即可。 =:与父scope中的属性进行双向绑定。 &:传递一个来自父scope的函数,稍后调用。 1.@的情况 <!DOCT...

2014/11/03 21:14
36
0
Underscore _.template 方法使用详解

https://github.com/hanzichi/underscore-analysis/issues/26 前文 浅谈 Web 中前后端模板引擎的使用 我们简单了解了模板引擎在前后端的应用场景,本文重点深入 Underscore 的模板函数 _.te...

2018/12/19 17:23
10
0
jQuery验证框架(三、四)选择器及实用工具 (jQuery validation)

jQuery验证框架 三、定制的选择器(Custom Selectors) [1] :blank 返回:Array<Element> 说明:匹配所有空值的表单元素。没有任何值或都空白符(whitespace)都被认为是空值。 它是由 jQuery.t...

2010/11/16 11:16
3.4K
0
angular_directive

1.关于restrict:'AECM' <!DOCTYPE html> <html ng-app="myModule" lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="angular-1.2.26...

2014/11/03 16:11
29
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部