实例一:list简单应用
<!doctype html> <html> <head> <script src="lib/jquery-1.7.2.js" type="text/javascript"></script> <script src="lib/easy.template.js" type="text/javascript"></script> </head> <body> <div id="localSign"></div> </body> <script id="templateSign" type="text/x-easy-template"> <#macro bjTest data> <#list data as list> <li>这里是第${list_index+1}列:${list}</li> </#list> </#macro> </script> <script type="text/javascript"> var navigationLinkData = [ 'one','two','three','four','five','six' ]; var getNavContent = function(data){ if(!data || !data.length){ return ''; } var res = easyTemplate($('#templateSign').html(), data).toString(); console.log(res); return res; }; $('#localSign').html(getNavContent(navigationLinkData)); </script> </html>
运行效果:
实例二:添加到页面多处的list应用
<!doctype html> <html> <head> <script src="lib/jquery-1.7.2.js" type="text/javascript"></script> <script src="lib/easy.template.js" type="text/javascript"></script> </head> <body> <div class="localSign"></div> ---------------------------------- <br> bijian <br> ---------------------------------- <br> <div class="localSign"></div> </body> <script id="templateSign" type="text/x-easy-template"> <#macro bjTest data> <#list data as list> <li>这里是第${list_index+1}列:${list.code},${list.name}</li> </#list> </#macro> </script> <script type="text/javascript"> var navigationLinkData = [ {code:'one',name:'一'},{code:'two',name:'二'},{code:'three',name:'三'},{code:'four',name:'四'},{code:'five',name:'五'},{code:'six',name:'六'} ]; var getNavContent = function(data){ if(!data || !data.length){ return ''; } var res = easyTemplate($('#templateSign').html(), data).toString(); console.log(res); return res; }; $('.localSign').html(getNavContent(navigationLinkData)); </script> </html>
运行效果:
实例三:表格列数据模块化生成
<!doctype html> <html> <head> <script src="lib/jquery-1.7.2.js" type="text/javascript"></script> <script src="lib/easy.template.js" type="text/javascript"></script> </head> <body> <table border="1"> <tr> <td>第一栏</td> <td>第二栏</td> <td>第三栏</td> <td>动态一栏</td> <td>动态二栏</td> <td>动态三栏</td> </tr> <tr id="localSign0"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr id="localSign1"> <td>one</td> <td>two</td> <td>three</td> </tr> <tr id="localSign2"> <td>一</td> <td>二</td> <td>三</td> </tr> </table> </body> <script id="templateSign" type="text/x-easy-template"> <#macro bjTest data> <td>${data.code}</td> <td>${data.name}</td> <td>${data.age}</td> </#macro> </script> <script type="text/javascript"> var navigationLinkData = [ {code:'001',name:'张三',age:20}, {code:'002',name:'李四',age:25}, {code:'003',name:'王五',age:30} ]; var getNavContent = function(data){ if(!data){ return ''; } var res = easyTemplate($('#templateSign').html(), data).toString(); console.log(res); return res; }; for(var i=0;i<navigationLinkData.length;i++) { $('#localSign'+i).append(getNavContent(navigationLinkData[i])); } </script> </html>
运行效果:
附:macro标签的作用就是输出模板的前后注释标识
相关推荐
### SQL数据库默认实例与命名实例的区别 在SQL Server中,实例是服务器上SQL Server服务的具体实现。当安装SQL Server时,可以选择安装默认实例或者命名实例。这两种实例类型各有其特点和适用场景,本文将深入探讨...
删除和重建 Oracle 实例 Oracle 数据库是一种关系型数据库管理系统,广泛应用于企业级数据库应用中。然而,在某些情况下,我们需要删除和重建 Oracle 实例,以便解决一些问题或进行升级维护。在这篇文章中,我们将...
Proteus单片机仿真实例源码-32x16汉字.zip Proteus单片机仿真实例源码-44行列键盘.rar Proteus单片机仿真实例源码-44行列键盘.zip Proteus单片机仿真实例源码-485全双工通信.rar Proteus单片机仿真实例源码-485全...
实例1 如何使用错误提醒控件 实例2 如何使用信息提示控件 实例3 如何使用菜单控件 实例4 如何使用工具栏控件 实例5 如何使用状态栏控件 实例6 如何使用托盘控件 实例7 如何使用标签页控件 实例8 如何使用进度条控件 ...
### SQL Server 2008 R2 添加实例的详细步骤 #### 一、概述 SQL Server 2008 R2 是一款强大的关系型数据库管理系统,广泛应用于企业级数据管理和处理场景。对于需要在同一台服务器上运行多个独立的SQL Server环境...
QT5开发及实例配套[源代码] Qt是诺基亚公司的C++可视化开发平台,本书以Qt 5作为平台,每个章节在简单介绍开发环境的基础上,用一个小实例,介绍Qt 5应用程序开发各个方面,然后系统介绍Qt 5应用程序的开发技术,...
本实例集合将深入探讨J2EE的核心概念和技术,帮助开发者更好地理解和应用J2EE。 首先,J2EE的核心组件包括Servlet、JavaServer Pages (JSP)、JavaBean、EJB(Enterprise JavaBeans)、JMS(Java Message Service)...
MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板MCGS高级教程实例模板...
java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象与类实例java对象...
opengl 实例实例实例实例实例opengl 实例实例实例实例实例
下面我们将围绕"LabVIEW 55个经典实例"这一主题,探讨这些实例可能涵盖的知识点,以及它们如何帮助用户提升LabVIEW技能。 1. **基础编程概念**:这55个实例可能会包含基础的编程概念,如循环(For Loop, While Loop...
《C++编程实例100篇》是一本深入浅出的C++编程教程,它以实践为主导,通过丰富的实例帮助学习者掌握C++语言的基础和核心概念。这本书的每个实例都精心设计,旨在帮助初学者和有经验的开发者巩固和提升C++编程技能。 ...
本"JS实例大全"聚焦于展示JavaScript在实际应用中的各种功能和技巧,帮助开发者更好地理解和掌握这门语言。 一、基础语法与数据类型 JavaScript的基础语法包括变量声明(var、let、const)、数据类型(如字符串、...
最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例最新单片机仿真 8255并行口扩展实例...
githubsakuracat简介及应用实例及实例分析.txt简介及应用实例及实例分析.txtsakuracat简介及应用实例及实例分析.txt简介及应用实例及实例分析.txtsakuracat简介及应用实例及实例分析.txt简介及应用实例及实例分析....
51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机Proteus仿真实例 闪烁LED51单片机...
本文将深入探讨这些"python 脚本实例 编程实例 入门实例",帮助你理解Python的基本概念和常用操作。 1. **变量与数据类型** Python中的数据类型包括整型(int)、浮点型(float)、字符串(str)和布尔型(bool)...
C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++编程实例详解C++...
《Zemax设计实例500.zip》是一款包含大量光学设计实例的资源包,对于学习和提升光学设计技能的初学者及专业人士来说极具价值。Zemax是业界广泛使用的光学设计软件,它提供了强大的优化和分析工具,使得复杂光学系统...