Underscore template
/*********************************************************************
* Underscore template
* 说明:
* 在找JavaScript数据处理lib的时候,找到Underscore,细读一下其开发文档,
* 发现里面有template处理,对比了一下Handlebars,感觉Underscore更适合目前使
* 用,主要是目前足够了。
*
* 2017-8-28 深圳 龙华樟坑村 曾剑锋
********************************************************************/ 一、参考文档:
. Underscore
http://underscorejs.org/
. Underscore template
http://www.bootcss.com/p/underscore/#template
. UnderscoreJS精巧而强大工具包
http://blog.fens.me/nodejs-underscore/
. underscore templates - JSFiddle
https://jsfiddle.net/casiano/LS384/ 二、template demo:
<!-- Install jQuery and underscore --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <!-- Create your template -->
<script type="foo/bar" id='usageList'>
<table cellspacing='' cellpadding='' border='' >
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<%
// repeat items
_.each(items,function(item,key,list){
// create variables
var f = item.name.split("").shift().toLowerCase();
%>
<tr>
<!-- use variables -->
<td><%= key %></td>
<td class="<%= f %>">
<!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->
<h3><%- item.name %></h3>
<p><%- item.interests %></p>
</td>
</tr>
<%
});
%>
</tbody>
</table>
</script> <!-- Create your target --> <div id="target"></div> <!-- Write some code to fetch the data and apply template --> <script type="text/javascript">
var items = [
{name:"Alexander", interests:"creating large empires"},
{name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"},
{name:"..."},
{name:"Yolando", interests:"working out"},
{name:"Zachary", interests:"picking flowers for Angela"}
];
var template = $("#usageList").html();
$("#target").html(_.template(template,{items:items}));
</script>
Underscore template的更多相关文章
- require.js+knockout.js+.underscore模板引擎的使用
第一种使用方式: HTML: <ul data-bind="template: { name: 'peopleList' }"></ul> <scri ...
- 深入解析Backbone.js框架的依赖库Underscore.js的作用
这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views
这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview ...
- Kubernetes采用CoreDNS
参考文档: kubernetes插件:https://github.com/kubernetes/kubernetes/tree/master/cluster/addons/dns/coredns 自 ...
- Kubernetes 部署 1.9.7 高可用版
转载于https://codegreen.cn/2018/08/30/kubernetes-cluster-1.9.7/ 前言 在部署之前,首先感谢 手动搭建高可用的kubernetes 集群 博文的 ...
- [Backbone]5. Model & View, toggle between Models and Views -- 2
Dr. Goodparts is pretty flaky and has been cancelling a lot of appointments lately. He's asked for a ...
- [Backbone]3. More detail on View
Change the AppointmentView to have a top-level li tag (instead of the default div tag). var Appointm ...
- kubernetes 之dns 服务发现
1.在每个节点上面导入如下镜像 [root@node1 DNS]# lltotal 59816-rw-r--r--. 1 root root 8603136 Nov 25 18:13 execheal ...
- k8s1.13.0二进制部署-Dashboard和coredns(五)
部署UI 下载yaml文件https://github.com/kubernetes/kubernetes [root@k8s-master1 ~]# git clone https://github ...
随机推荐
- PayPal2019春招实习生笔试题的某一题
题目简单描述:给你n个点的坐标(x, y),均为浮点数. 如果任意两个点之间的欧几里得距离小于给定的一个浮点值,则认为这两个点之间有关联,并且关联具有传递性,总之就是尽可能扩大一个集合. 输入: d ...
- filebeat 乱码
查看 文件的类型 [root@elk-node-1 rsyslog] # file 192.168.1.16.log 192.168.1.16.log: Non-ISO extended-ASCII ...
- Spring Boot 上传图片文件
步骤一:基于前面springboot入门小demo 基于的springboot入门小demo,已包含了前面文章的知识点(比如:热部署.全局异常处理器). 步骤二:创建uploadPage.jsp上传页 ...
- Entity Framework 中 Schema是什么
在使用Entity Framework时,会注意到下面这句: protected override void OnModelCreating(DbModelBuilder modelBuilder) ...
- 'webpack' 不是内部或外部命令解决办法以及npm配置
昨天在笔记本上安装webpack,按照教程下来,使用webpack命令行,报错:'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文件.网上有大量的配置方法与解决办法,找了好久才成功 ...
- WPF 回车转Tab实现跳转
1.重写窗体的KeyDown事件 protected override void OnKeyDown(KeyEventArgs e) { if (e.Key == Key.Enter) { // Mo ...
- poj2187凸包最远点对
暴力过了 #include<map> #include<set> #include<cmath> #include<queue> #include< ...
- 1-15-1 RAID磁盘阵列的原理和搭建
大纲: 1.1-1-企业级RAID磁盘阵列 RAID磁盘阵列的原理 RAID0,1,5,10的搭建 硬件RAID卡 1.2-1-使用廉价的磁盘搭建RAID磁盘阵列 实战-配置RAID0带区卷 ==== ...
- 原生javascript-分享自己常用的函数
[一]添加监听事件 addHandler:function(node,type,fn){if(node.addEventListener){ node.addEventListener(type,fn ...
- windows下配置cuda9.0和pytorch
今天看了看pytorch官网竟然支持windows了,赶紧搞一个. 下载cuda 9.0 https://developer.nvidia.com/cuda-downloads 下载anaconda ...