【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎
引用地址:http://juicer.name/docs/docs_zh_cn.html
* 一个完整的例子
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);
【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎的更多相关文章
- doT.js——前端javascript模板引擎问题备忘录
我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想 ...
- JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
- JavaScript模板引擎
JavaScript模板引擎实例应用 在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...
- JavaScript模板引擎实例应用(转)
本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...
- 前端javascript模板
doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...
- [转载]Juicer – 一个Javascript模板引擎的实现和优化
http://ued.taobao.org/blog/2012/04/juicer-%E4%B8%80%E4%B8%AAjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6 ...
- 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用
前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...
- Juicer javascript 模板引擎
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. js模板引擎包括如下:template官方参考:http://au ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
随机推荐
- UIDynamic--动力元素行为:UIDynamicItemBehavior
属性分析: @property (nonatomic, readonly, copy) NSArray* items; @property (readwrite, nonatomic) CGFloat ...
- Nginx的启动脚本(Centos)
vim /etc/init.d/nginxservice nginx start #!/bin/sh # chkconfig: 2345 85 15 # description:Nginx Serve ...
- 【Beta】Scrum07
Info 由于编译考试,会议记录推迟发布.18~19两天工作暂停:同时由于有组员外出不在学校,本次会议采用线上会议形式 时间:2016.12.17 21:35 时长:15min 地点:讨论组 类型:线 ...
- 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架(三)
Spring+SpringMVC MVC呢,现在似乎越来越流行使用SpringMVC框架,我自己用的感觉,是非常好,确实很舒服,配置一开始是麻烦了一点点,但是后续的开发真的是很清爽! SpringMV ...
- android studio关联genymotion模拟器,未显示设备
如以下截图所示,在搭建android studio+genymotion时,遇到android studio关联genymotion时,显示不出模拟器设备,请问有没有遇到此现象的朋友,分享下解决方法, ...
- springmvc 格式化使用Jackjson格式化报Failed to write HTTP message
Failed to write HTTP message: org.springframework.http.converter.HttpMessageNotWritableException: Co ...
- unsilder中的jq深入学习
//trigger $('#foo').on('click', function() { alert($(this).text()); }); $('#foo').trigger('click'); ...
- Spring,Mybatis 整合Memcache
Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...
- hdu2211杀人游戏
Problem Description 不知道你是否玩过杀人游戏,这里的杀人游戏可没有法官,警察之类的人,只有土匪,现在已知有N个土匪站在一排,每个土匪都有一个编号,从1到N,每次杀人时给定一个K值, ...
- 操作系统中的P,V操作(转)
无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...