/*********************************************************************
* 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的更多相关文章

  1. require.js+knockout.js+.underscore模板引擎的使用

    第一种使用方式: HTML: <ul data-bind="template: { name: 'peopleList' }"></ul> <scri ...

  2. 深入解析Backbone.js框架的依赖库Underscore.js的作用

    这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...

  3. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views

    这个版本的TodoMVC中的视图组织划分比较细,更加易于理解,这也得益于Marionette为我们带来了丰富的视图选择,原生的backbone只有views,而Marionette则有itemview ...

  4. Kubernetes采用CoreDNS

    参考文档: kubernetes插件:https://github.com/kubernetes/kubernetes/tree/master/cluster/addons/dns/coredns 自 ...

  5. Kubernetes 部署 1.9.7 高可用版

    转载于https://codegreen.cn/2018/08/30/kubernetes-cluster-1.9.7/ 前言 在部署之前,首先感谢 手动搭建高可用的kubernetes 集群 博文的 ...

  6. [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 ...

  7. [Backbone]3. More detail on View

    Change the AppointmentView to have a top-level li tag (instead of the default div tag). var Appointm ...

  8. kubernetes 之dns 服务发现

    1.在每个节点上面导入如下镜像 [root@node1 DNS]# lltotal 59816-rw-r--r--. 1 root root 8603136 Nov 25 18:13 execheal ...

  9. k8s1.13.0二进制部署-Dashboard和coredns(五)

    部署UI 下载yaml文件https://github.com/kubernetes/kubernetes [root@k8s-master1 ~]# git clone https://github ...

随机推荐

  1. PayPal2019春招实习生笔试题的某一题

    题目简单描述:给你n个点的坐标(x, y),均为浮点数. 如果任意两个点之间的欧几里得距离小于给定的一个浮点值,则认为这两个点之间有关联,并且关联具有传递性,总之就是尽可能扩大一个集合. 输入: d ...

  2. filebeat 乱码

    查看 文件的类型 [root@elk-node-1 rsyslog] # file 192.168.1.16.log 192.168.1.16.log: Non-ISO extended-ASCII ...

  3. Spring Boot 上传图片文件

    步骤一:基于前面springboot入门小demo 基于的springboot入门小demo,已包含了前面文章的知识点(比如:热部署.全局异常处理器). 步骤二:创建uploadPage.jsp上传页 ...

  4. Entity Framework 中 Schema是什么

    在使用Entity Framework时,会注意到下面这句: protected override void OnModelCreating(DbModelBuilder modelBuilder) ...

  5. 'webpack' 不是内部或外部命令解决办法以及npm配置

    昨天在笔记本上安装webpack,按照教程下来,使用webpack命令行,报错:'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文件.网上有大量的配置方法与解决办法,找了好久才成功 ...

  6. WPF 回车转Tab实现跳转

    1.重写窗体的KeyDown事件 protected override void OnKeyDown(KeyEventArgs e) { if (e.Key == Key.Enter) { // Mo ...

  7. poj2187凸包最远点对

    暴力过了 #include<map> #include<set> #include<cmath> #include<queue> #include< ...

  8. 1-15-1 RAID磁盘阵列的原理和搭建

    大纲: 1.1-1-企业级RAID磁盘阵列 RAID磁盘阵列的原理 RAID0,1,5,10的搭建 硬件RAID卡 1.2-1-使用廉价的磁盘搭建RAID磁盘阵列 实战-配置RAID0带区卷 ==== ...

  9. 原生javascript-分享自己常用的函数

    [一]添加监听事件 addHandler:function(node,type,fn){if(node.addEventListener){ node.addEventListener(type,fn ...

  10. windows下配置cuda9.0和pytorch

    今天看了看pytorch官网竟然支持windows了,赶紧搞一个. 下载cuda 9.0  https://developer.nvidia.com/cuda-downloads 下载anaconda ...