使用 underscore.js 模块解析

Underscore提供了一个轻量级的模板解析函数,它可以帮助我们有效地组织页面结构和逻辑。

实例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/underscore.js"></script>
<script src="Scripts/jquery-1.11.1.min.js"></script>
</head>
<body>
<!-- 用于显示渲染后的标签 -->
<ul id="element"></ul> <!-- 定义模板,将模板内容放到一个script标签中 -->
<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 type="text/javascript">
// 获取渲染元素和模板内容
var element = $('#element'),
tpl = $('#tpl').html(); // 创建数据, 这些数据可能是你从服务器获取的
var data = {
list: [
{ firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai' },
{ firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>' },
{ firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou' },
{ firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen' }
]
} // 解析模板, 返回解析后的内容
var render = _.template(tpl);
var html = render(data);
// 将解析后的内容填充到渲染元素
element.html(html);
</script>
</body>
</html>

 

在本例中,我们将模板内容放到一个<script>标签中,你可能已经注意到标签的type是text/template而不是text/javascript,因为它无法作为JavaScript脚本直接运行。
 
我也建议你将模板内容放在<script>中,因为如果你将它们写在一个<div>或其它标签中,它们可能会被添加到DOM树中进行解析(即使你隐藏了这个标签也无法避免)。
 
.template模板函数只能解析3种模板标签(这比Smarty、JSTL要简单得多):

<%  %>:用于包含JavaScript代码,这些代码将在渲染数据时被执行。
 
<%= %>:用于输出数据,可以是一个变量、某个对象的属性、或函数调用(将输出函数的返回值)。
 
<%- %>:用于输出数据,同时会将数据中包含的HTML字符转换为实体形式(例如它会将双引号转换为&quot;形式),用于避免XSS攻击。
 
当我们希望将数据中的HTML作为文本显示出来时,常常会使用<%- %>标签。
 
Underscore还允许你修改这3种标签的形式,如果我们想使用{% %}、{%= %}、{%- %}作为标签,可以通过修改templateSettings来实现,就像这样: 
_.templateSettings = {
evaluate : /\{%([\s\S]+?)\%\}/g,
interpolate : /\{%=([\s\S]+?)\%\}/g,
escape : /\{%-([\s\S]+?)%\}/g
}

.

mui 根据 json 数据动态创建列表的更多相关文章

  1. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  2. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  3. 用Servlet返回JSON文本动态创建DataGrid

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...

  4. 原生js,jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

  5. 一起使用mock数据动态创建表格

    在ant-design中,我们创建一个基础table会怎么实现呢? 如下代码可视,我们会自己创建一些数据,在表格中渲染出来,如下 <Card title="基础表格"> ...

  6. silverlight依据json字符串动态创建实体类

    1.接收json字符串: //用JsonValue转换json字符串是为了之后获得json字符串的每行数据和每一列的列名 JsonValue jv = JsonValue.Parse(json);   ...

  7. jQuery 根据JSON数据动态生成表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. layui 根据根据后台数据动态创建下拉框并同时默认选中

        第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...

  9. 从服务器端获取列和数据动态创建Ext.grid.EditorGridPanel

    1.添加列的方法 var addColumn = function(){ this.fields = ''; this.columns = ''; this.addColumns=function(n ...

随机推荐

  1. 一段js代码的分析

    function foo(a){ console.log(a+b); b=a+2; console.log(a+b); } foo(2); foo(3); var b=3; foo(4); 结果是: ...

  2. springboot hystrix turbine 聚合监控

    1.新建Module  eureka-monitor-client 2.父级pom中添加module 3.编写eureka-monitor-client 中的pom <?xml version= ...

  3. Python爬链接

    # -*- coding: utf-8 -*- """ Created on Wed Jan 11 17:21:54 2017 @author: PE-Monitor & ...

  4. hdu6049

    hdu6049 题意 给出一串由 \([1, n]\) 组成的 \(n\) 个数,每个数字都不相同.现在要尽可能的分成多个块,每个块内的数可以任意排序,且分完块后可以交换两个块的位置,问使得最后序列有 ...

  5. Scala实战高手****第6课 :零基础实战Scala集合操作及Spark源码解析

    本课内容1.Spark中Scala集合操作鉴赏2.Scala集合操作实战 --------------------------------------------------------------- ...

  6. HTML5 Boilerplate笔记(3)

    HTML5 Boilerplate项目网址:https://github.com/h5bp/html5-boilerplate

  7. iOS开发中几种常见的存储方式

    1.archive 归档 数据的保存 1: let result = NSKeyedArchiver.archiveRootObject(contacts, toFile: path as Strin ...

  8. hdu2829 四边形优化dp

    Lawrence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  9. Interaction triggers in WPF

    Interaction Class - static class that owns the Triggers and Behaviors attached properties. Handles p ...

  10. DataRow 数组转化成DataTable

    #region 封装DataTable DataTable dt = null; if (newRows.Length > 0) { dt = newRows[0].Table.Clone(); ...