基本语法:
循环遍历 {@each} ... {@/each}
{ @each list as item}
${item.prop}
{@/each}
{@each list as item,index}
${item.prop}
判断 {@if} ... {@else if} ... {@else} ... {@/if}
{@each list as item,index}
{@if index===3}
the index is 3, the value is ${item.prop}
{@else if index === 4}
the index is 4, the value is ${item.prop}
{@else}
the index is not 3, the value is ${item.prop}
{@/if}
{@/each}
注释 {# 注释内容}
{# 这里是注释内容}
一个完整的例子
HTML 代码:
<script id="tpl" type="text/template">
<ul>
{@each list as it,index}
<li>${it.name} (index: ${index})</li>
{@/each}
{@each blah as it}
<li>num: ${it.num} <br />
{@if it.num==3}
{@each it.inner as it2}
${it2.time} <br />
{@/each}
{@/if}
</li>
{@/each}
</ul>
</script>
Javascript 代码:
var data = {list: [
{name:' guokai', show: true},
{name:' benben', show: false},
{name:' dierbaby', show: true}],
blah: [{num: 1},{num: 2},{num: 3, inner:[{'time': '15:00'},{'time': '16:00'},{'time': '17:00'},{'time': '18:00'}]}, {num: 4}]
};
var tpl = document.getElementById('tpl').innerHTML;
var html = juicer(tpl, data);
分享到:
相关推荐
记录一个js模板引擎从无到有一步步实现改进的过程,内容直接以一个个html文件直观呈现
腾讯的js模板引擎template.js 方便ajax请求的数据进行遍历和数据绑定。
比较简单,又小巧的js模板引擎,非常好用的。
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统js引擎的几乎所有功能。所有的变身魔法都由不到2KB的代码创造,laytpl视图用最轻量的...
Velocity 是基于Java的模板引擎,广泛应用在阿里集 体各个子公司。Velocity模板适用于大量模板使用的场景,支持复杂的逻辑运算,包含 基本数据类型、变量赋值和函数等功能。Velocity.js 支持 Node.js 和浏览器环境。...
Surge.js 是新的示例,更快的 Javascript 模板引擎,语法跟 Liquid 和 Django template一样 。Surge.js 会解析 Html 模板中的 JavaScript 函数,编译的函数会被缓存。教程速度测试 V8 Javascript engine 的测试...
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。 本资源包含了mustache.js 、mustache.min.js包 版本号v2.2.1
ECT是一个新兴的JavaScript模板引擎,主要致力于性能表现。 ECT开发者称,与其他引擎(如Dust、Hogan.js、Fest、Handlebars.js、doT、Swig、Eco、EJS、CoffeeKup和Jade等)相比,ECT目前是最快的,见基准测试。你...
template.js的fis编译插件——一款javascript模板引擎
template.js的webpakc编译loader——一款javascript模板引擎
doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 标签:doTjs
template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。特性:模版编译,渲染支持所有主流浏览器及Node...
前端js模板引擎artTemplate视频教程,wangpan链接下载
consolidate.js是一款javascript 模板引擎整合库.支持现今流行的多种模板引擎. 标签:consolidate
DustJS 是一个支持浏览器和 Node.js 的异步模板引擎。特点:async/streaming operationbrowser/node compatibilityextended Mustache/ctemplate syntaxclean, low-level APIhigh performancecomposable templates ...
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能。所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又...
新一代 javascript 模板引擎
Tempos高效的Javascript模板引擎
Nunjucks 是一个更复杂的 JavaScript 模板引擎,提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。示例代码:{% extends "base.html" %} {% block header %} <h1>{{ title }} {% endblock %...
百度JS模板引擎 baiduTemplate 1.0.6 版 重构代码,修改定义变量的bug,增加对版本号的标注