实例一: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标签的作用就是输出模板的前后注释标识
相关推荐
NULL 博文链接:https://bijian1013.iteye.com/blog/2034878
### SQL数据库默认实例与命名实例的区别 在SQL Server中,实例是服务器上SQL Server服务的具体实现。当安装SQL Server时,可以选择安装默认实例或者命名实例。这两种实例类型各有其特点和适用场景,本文将深入探讨...
Proteus单片机仿真实例源码-32x16汉字.zip Proteus单片机仿真实例源码-44行列键盘.rar Proteus单片机仿真实例源码-44行列键盘.zip Proteus单片机仿真实例源码-485全双工通信.rar Proteus单片机仿真实例源码-485全...
OpenGL实例 OpenGL实例 OpenGL实例 OpenGL实例 OpenGL实例
实例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应用程序的开发技术,...
数据结构实践教程:内含17个经典数据结构实例 根据五个不同数据结构,对每个结构都有2~4个经典实例。每个实例都有项目简介、设计思路、数据结构、完整程序、运行结果五个部分,可以直接拿来做一篇课程设计。实例名称...
本实例集合将深入探讨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高级教程实例模板...
opengl 实例实例实例实例实例opengl 实例实例实例实例实例
下面我们将围绕"LabVIEW 55个经典实例"这一主题,探讨这些实例可能涵盖的知识点,以及它们如何帮助用户提升LabVIEW技能。 1. **基础编程概念**:这55个实例可能会包含基础的编程概念,如循环(For Loop, While Loop...
《C++编程实例100篇》是一本深入浅出的C++编程教程,它以实践为主导,通过丰富的实例帮助学习者掌握C++语言的基础和核心概念。这本书的每个实例都精心设计,旨在帮助初学者和有经验的开发者巩固和提升C++编程技能。 ...
最新单片机仿真 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单片机...
### Activiti多实例任务实现会签功能详解 #### 一、多实例用户任务的基本概念与配置 Activiti是一个开源的工作流引擎,它提供了一种灵活的方式来定义业务流程,并且能够支持复杂的业务逻辑处理。其中,多实例任务...
gpiogpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用实例gpio详解及应用...
本文将深入探讨这些"python 脚本实例 编程实例 入门实例",帮助你理解Python的基本概念和常用操作。 1. **变量与数据类型** Python中的数据类型包括整型(int)、浮点型(float)、字符串(str)和布尔型(bool)...