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...

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

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

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

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

2015/11/19 19:38
56
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="", ...

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

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

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

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

2014/11/03 21:14
36
0
Script编码工具推荐

JavaScript和Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)可以为HTML页面添加各种交互和动态效果,让你的网站更加引人注目。本文为你整理了10款Ajax和JavaScript相关的编码...

2012/04/15 23:07
93
0
Create a restful application with AngularJS and CakePHP(III)

#Create a restful application with AngularJS and CakePHP(III) #Build the frontend pages with AngularJS [AngularJS](http://www.angularjs.org) is one of the most popular JS framew...

2013/11/10 18:21
113
0
JavaScript MVC框架backbone.js初探

什么是backbone backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架。 主要提供了3个东西:1、models(模型) 2、collections(集合) 3、views(视图) backbone.js文件本身很小,压缩...

2013/01/07 14:25
247
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部