template.js 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
template.js 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
template.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
template.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
template.js 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

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
2018/10/12 16:31
回复
举报
颜海镜软件作者
大家有问题,可以来github提issue
2018/08/08 10:52
回复
举报
打分: 还行
正在用template.js,有个问题。style的里面背景图片属性的值怎么设置不了?
2017/05/11 11:43
回复
举报
2016/07/16 15:16
回复
举报
更多评论
暂无内容
2014/04/17 03:04

javascript template

老版本演示在这里: http://runjs.cn/code/kwf1q7co, 新版本用法也差不多,老版本有些 bug 加上实现代码太丑了,所以更新了一下,没什么新意,就是玩儿。 var JsTpl = function (strTpl, debug) {     this.strTpl = strTpl || '';     this.cTpl = null;     this.debug = debug || false;     this.syntaxReg = /\{\{([^{}]+)\}\}/g; }; JsTpl._syntaxDict = {     'if(.*):': n...

0
5
发表了博客
2012/09/17 16:06

如何选择Javascript模板引擎(javascript template engine)?

日期:2012-9-17 来源:GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: 你的到了一个JSON对象,如下: var data={   email: 'terry.li@gbin1.com,   gender: 'male'  } 然后你需要将json数据组织成页面内容,如下: var email, gender; email= '<div class="mail">' + data.email+ </div>'; gender= '<div class="gender">' + data...

0
5
发表了博客
2019/04/07 22:33

JS的type类型为 text/template

JS标签中有时候会看见<script type="text/tmplate" >,大概就是一个放置模板的地方,而这些东西并不显示在页面 在js里面,经常需要使用js往页面中插入html内容。比如这样: var number = 123; $('#d').append('<div class="t">'+number+'</div>') 如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连接起来,十分的不方便。 <script>设置type=...

0
0
发表于大前端专区
2019/07/27 15:39

JS模板引擎art-template

JS模板引擎art-template

0
0
发表了博客
2019/09/04 18:35

js 使用script或template标签:分离js代码template中的HTML元素

参考:https://www.jianshu.com/p/332252abe016 方法一. script: <div id="app"> <com-first></com-first> </div> <script type="text/x-template" id="comFirst"> <div>component 1</div> </script> <script> Vue.component('com-first',{ template: '#comFirst' }) new Vue({ el: '#app' }) </script> 方法二. t...

0
0
发表了博客
2013/04/18 10:15

handlebars: a power javascript template engine

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features. 1. 添加jquery和handlebars脚本 <script type="text/javascript" src="jquery.js"></script> <script type="text/javasc...

0
0
发表了博客
2010/03/30 18:55

JavaScript Template JST模板引擎----Trimpath

原文:http://bbs.javascript.com.cn/simple/index.php?t1022.html 官网:http://code.google.com/p/trimpath/ Trimpath JavaScript 是个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎。新浪的评论系统使用的就是此模板。 它有如下的特点: 1、采用标准的JavaScript编写,支持跨浏览器 2、模板语法类似于:FreeMarker,Velocity,Smarty 3、采用简易的语言来...

0
2
2019/10/13 00:28

JS模版引擎 art-template 基本语法

  art-template 是一个简约、超快的模板引擎。拥有接近 JavaScript 渲染极限的的性能,并且同时支持 NodeJS 和浏览器。浏览器版本仅 6KB 大小。在之前的传统项目中使用过浏览器版本,虽然现在没在用了,但是它体积小、效率高、学习成本低,好的东西就要记录一下。 ### 1、安装、下载 + npm安装 `npm install art-template --save` + 浏览器中使用 下载 [template-web.js](https://unpkg.com/art-template@4.13.2/lib/template...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2016/12/21 09:12

比handlebars.js有何优势

比handlebars.js有何优势

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
4 评论
97 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部