引用地址: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) 模板引擎的更多相关文章

  1. doT.js——前端javascript模板引擎问题备忘录

    我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想 ...

  2. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  3. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  4. JavaScript模板引擎实例应用(转)

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  5. 前端javascript模板

    doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...

  6. [转载]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 ...

  7. 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  8. Juicer javascript 模板引擎

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. js模板引擎包括如下:template官方参考:http://au ...

  9. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

随机推荐

  1. 锋利的jquery-读书笔记(一)

    最近转职做前端,学了两个月目前学到jquery的部分,看的是<锋利的jquery>这本书,特地开了博客将自己学习过程中看到的一些知识做一个笔记. 第一章: 一.jQuery对象和DOM对象 ...

  2. cocos2dx3.0的CCCallFunc、CCCallFuncN

    来源: http://blog.csdn.net/crayondeng/article/details/18767407 二.在cocos2d-x中,还有一个地方是需要大量使用到回调函数的,这就是回调 ...

  3. 精通Web Analytics 2.0 (10) 第八章:竞争情报分析

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第八章:竞争情报分析 在现实世界中,收集竞争情报可能意味着雇人在竞争对手的垃圾桶(实际会发生!)翻找. 在虚拟世界中,堆如山的数 ...

  4. 团队作业week16

    0.新成员如何管理和使用这个工程? 对于后端而言,因为我们也是初次接触Django,因此从我们学习到程序编写过程中用到的各种知识都有学习笔记,比如Django的详细使用,Django数据库的使用.跨域 ...

  5. MyEclipse部署web项目到Tomcat出现An internal error occurred during: "Launching on Tomcat 7.x"的问题

    如果出现了上述的错误按照如下的3个步骤解决:1.首先关闭MyEclipse工作空间.2.然后删除工作空间下的文件."MyEclipse10\workspace.metadata.plugin ...

  6. css3 圆角

    -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ bo ...

  7. [UML]UML系列——时序图(顺序图)sequence diagram

    系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class [UML]UML系列——类 ...

  8. TCP学习之一:TCP网络编程概念

    参考学习张子阳大神的博客:http://www.cnblogs.com/JimmyZhang/category/101698.html 一.TCP 面向连接的(UDP是无连接的) 全双工,建立连接之后 ...

  9. [Linux] Linux常用文本操作命令整理

    简单的总结一下常用的一些实用的Linux文本操作命令,包括wc(统计).cut(切分).sort(排序).uniq(去重).grep(查找).sed(替换.插入.删除).awk(文本分析). 1.统计 ...

  10. Xcode 快捷键、常用技巧

    关于iOS开发中的技能快捷键 经常使用鼠标太TM的D疼了,快捷键能大大地提高我们的开发速度,使我们的手指尽情的在键盘上飞舞,优美的代码,哈哈哈,那些常规的复制.粘贴.剪切请自行度娘或者Google一下 ...