关于 underscore 中模板引擎的应用演示样例

//关于 underscore 中模板引擎的应用演示样例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>关于 underscore 中模板引擎的应用演示样例</title>
</head>
<body>
<ul id="test"></ul>

<script type="text/template" id="tpl">
<% for(var i = 0; i < list.length; i++) { %>
<% var item = list[i] %>
<li>
<span><%=item.firstName%> <%=item.lastName%></span>
<span><%-item.city%></span>
</li>
<% } %>
</script>
<script src="sea.js"></script>
<script>
seajs.config({
paths: {
‘baiducdn‘: ‘http://libs.baidu.com‘,
‘360cdn‘: ‘http://libs.useso.com/‘,
‘freecdn‘: ‘http://libs.cncdn.cn/‘,
‘sinacdn‘: ‘http://lib.sinaapp.com/‘,
},
alias: {
‘jquery‘: ‘baiducdn/jquery/2.0.3/jquery.min.js‘,
‘backbone‘: ‘baiducdn/backbone/0.9.2/backbone-min.js‘,
‘underscore‘: ‘baiducdn/underscore/1.3.3/underscore-min.js‘,
},
});
seajs.use([‘jquery‘, ‘underscore‘], function(){
var testObj = $(‘#test‘),
tpl = $(‘#tpl‘).html();

//准备数据,能够通过JSON来自server
var data = {
list: [
{firstName: ‘Li‘, lastName: ‘Yunlong‘, city: ‘济南‘},
{firstName: ‘Wang‘, lastName: ‘Yunlong‘, city: ‘北京‘},
]
};
var html = _.template(tpl, data);//解析模板
testObj.html(html);
});

</script>
</body>
</html>

原文地址:https://www.cnblogs.com/llguanli/p/8525601.html

时间: 2024-08-22 05:32:23

关于 underscore 中模板引擎的应用演示样例的相关文章

将 Android* x86 NDK 用于 Eclipse* 并移植 NDK 演示样例应用

目标 面向 Eclipse (ADT) 的 Android 插件如今支持基于 NDK 的应用开发. 其可自己主动生成项目和构件文件以及代码存根,并可集成到整个 Android 应用开发中(构建原生库.将库拷贝到项目内的对应 JNI 目录.将应用打包以及生成带有 NDK 代码的终于 APK). 本文将讨论怎样配置 Eclipse 以利用该功能.并示范移植 NDK 应用的演示样例. 配置 Eclipse ADT 插件以配合 NDK 使用 必须先配置 Eclipse ADT 插件指向 NDK 安装路径

PHPCMS中GET标签概述、 get 标签语法、get 标签创建工具、get 调用本系统演示样例、get 调用其它系统演示样例

一.get 标签概述 通俗来讲,get 标签是Phpcms定义的能直接调用数据库里面内容的简单化.友好化代码,她可调用本系统和外部数据,仅仅有你对SQL有一定的了解,她就是你的绝世好剑!也就是适合熟悉SQL语句的人使用.有了她,我们打造个性化的站点,能很方便的调用出数据库里面指定的内容.通过条件限制,我们能够调用出不同条件下的不同数据. 二.get标签样式 {get dbsource=" " sql=" "} {/get} 三.get 标签语法 1.get标签属性值

SQL SEVER 2008中的演示样例数据库

SQL SEVER 2008数据库是什么我就不说了,我在这里分享一下怎样学习SQL SEVER 2008数据库,假设是对数据库或是SQL SEVER 数据库全然陌生或是不熟悉的人来说,建议看看一些视频教程.对数据库中包括的内容以及一些概念,常规操作有个感性的认识,对数据库有一定的感性认识之后.要深入学习SQL SEVER数据库.就应该使用在安装数据库的时候安装的--联机丛书--入手,深入学习SQL SEVER数据库,同一时候它就像msdn一样,也能够作为一个查询工具,在必要的时候,在上面查找sq

Lambda 表达式的演示样例-来源(MSDN)

本文演示怎样在你的程序中使用 lambda 表达式. 有关 lambda 表达式的概述.请參阅 C++ 中的 Lambda 表达式. 有关 lambda 表达式结构的具体信息,请參阅 Lambda 表达式语法. 本文内容 声明 Lambda 表达式 调用 Lambda 表达式 嵌套 Lambda 表达式 高阶 Lambda 函数 在函数中使用 Lambda 表达式 配合使用 Lambda 表达式和模板 处理异常 配合使用 Lambda 表达式和托管类型 声明 Lambda 表达式 演示样例 1

MapGuide应用程序演示样例——你好,MapGuide!

图 3?4显示了基于MapGuide的Web应用程序的开发流程,整个开发流程能够分为五个阶段.图中,矩形代表任务,椭圆形被任务使用的或被任务创建的实体,箭头代表数据流. 1) 载入文件类型的数据,配置到外部数据库的连接,通过联接(Join)一个要素源到还有一个要素源扩展要素数据. 2) 通过引用要素源的数据和为要素应用样式创建图层. 3) 将图层结合起来创建地图. 4) 通过Internet或Intrant公布地图,使用户能够通过client浏览地图. 5) 使用MapGuide API为ser

『HTML5梦幻之旅』 - 仿Qt演示样例Drag and Drop Robot(换装机器人)

起源 在Qt的演示样例中看到了一个有趣的demo.截图例如以下: 这个demo的名字叫Drag and Drop Robot,简单概括而言,在这个demo中,能够把机器人四周的颜色拖动到机器人的各个部位,比方说头.臂,身躯等.然后这个部位就会变成相应的颜色.相似于换装小游戏. 上图就是经过愚下的拖动颜色使其简略换装后的样子. 当然,拖动颜色使部件变色的功能并不难实现,关键在于这个机器人是动态的,我们要研究的就恰恰是这个机器人动画是怎么做出来的. 光凭两张图片我们无法知道这个动画究竟是什么样子的,

最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture)

===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频播放演示样例2:GDI播放YUV, RGB 最简单的视音频播放演示样例3:Direct3D播放YUV,RGB(通过Surface) 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture) 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV 最简单的视音频播放演示样例

内存损坏问题的演示样例及分析

原文以演示样例代码系统的讲述了三种内存损坏的情况: 全局内存.栈损坏及堆损坏, 以及它们产生的原因. 粗略整理例如以下. Global Memory Corruption 即全局变量的内存使用出了问题,主要还是越界. 例如以下代码: #include <stdio.h> #define MAX 6 int arrdata[MAX]; int endval; int main() { int i = 0; endval = 12; for (i = MAX; (endval) &&

JDBC连接MySQL数据库及演示样例

JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识         JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,能够为多种关系数据库提供统一訪问,它由一组用Java语言编写的类和接口组成.JDBC为数据库开发者提供了一个标准的API,据此能够构建更高级的工具和接口,使数据库开发者能够用纯 Java API 编写数据库应用程序,而且可跨平台执行,而且不受数据库供应商的限制.