引用地址: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. 马虎将classname加到了id属性中,造成报错

    今天做了一个瀑布流布局的小例子,自己在写代码的过程中一直报cannot read property 'style' of null,百度之后说是页面还没有加载完,但是我看了代码是写在window.on ...

  2. VR、AR、MR的区别

    VR.AR.MR定义: 什么是虚拟现实? 虚拟现实(Virtual Reality,简称VR,又译作灵境.幻真)是近年来出现的高新技术,也称灵境技术或人工环境.虚拟现实是利用电脑模拟产生一个三维空间的 ...

  3. C# 扩展系统类方法

    1.声明扩展方法的步骤:类必须是static,方法是static 2.第一个参数是被扩展的对象,前面标注this 3.使用扩展方法的时候必须保证扩展方法类已经在当前代码中using 例子:using ...

  4. Javascript中JSON对象的操作以及遍历key/value

    //遍历获取值: function text(){ var json = {"options":"[{/"text/":/"王家湾/&quo ...

  5. nodeJS 简单的模块。

    nodeJS是的模块流程: 第一步:创建模块,如:student.js 第二步:导出模块,如:exports.add = function(){} 第三步:加载模块,如:var student = r ...

  6. Java 随机抽奖

    package Third; import java.util.Scanner; public class LotteryOdds { public static void main(String[] ...

  7. PHP常用函数总结

    数学函数 abs() 求绝对值 传一个数字 会返回该值的绝对值 例如:abs(-1);//输出1 ceil() 进一法取整数 返回不小于 value 的下一个整数,value 如果有小数部分则进一位. ...

  8. Linux学习笔记<五>

    管道命令(pipe) 1.把一个命令的输出作为另一个命令的输入 ls -al /etc | less 2.选取命令:cut和grep cut命令可以将一段消息的某段切出来. -d接分隔符,-f是取出第 ...

  9. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...

  10. 2.4嵌套多重if else 的闰年判断以及bool变量的用法

    #include<stdio.h> #include<stdbool.h> int main() { int year; bool leap; //把leap定义为bool , ...