使用 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. Selenium2+python自动化43-判断title（title_is）【转载】

    前言 获取页面title的方法可以直接用driver.title获取到,然后也可以把获取到的结果用做断言. 本篇介绍另外一种方法去判断页面title是否与期望结果一种,用到上一篇Selenium2+p ...

  2. dict的setdefault（学习bottle源代码）

    在bottle的源代码中,看到如下一段话: sys.modules.setdefault('bottle', sys.modules['__main__']) 这段话,实际上就是dict类型的setd ...

  3. jQuery 立即执行

    ;(function($){// 可以去掉开头的 ; (分号),国外的开发人员编写的插件时的一种习惯 $.fn.pluginName = function() { // Our plugin impl ...

  4. QTP自动化测试框架的基础知识

    1. 什么是自动化测试框架? 假定你有一个活,需要构建许多自动化测试用例来测试这个应用程序.当你对这个应用程序完成自动化测试后,你对自己创建脚本应该有什么期望吗?你难道不想要- 脚本应该按照预期的来执 ...

  5. （3）webApi postman使用

    https://www.getpostman.com/

  6. noi 题库1.7字符串 第16至20题

    16:忽略大小写的字符串比较 一般我们用strcmp可比较两个字符串的大小,比较方法为对两个字符串从前往后逐个字符相比较(按ASCII码值大小比较),直到出现不同的字符或遇到'\0'为止.如果全部字符 ...

  7. 进程注入后门工具Cymothoa

    进程注入后门工具Cymothoa   Cymothoa是一款隐秘的后门工具.它通过向目标主机活跃的进程注入恶意代码,从而获取和原进程相同的权限.该工具最大的优点就是不创建新的进程,不容易被发现.由于该 ...

  8. [Codeforces 19E] Fiary

    Brief Intro: 给定一个无向图,询问删去哪条边能使得剩下的图为一个二分图,输出所有结果 Algorithm: 关于二分图的重要性质:一个图为二分图的充要条件为其中没有奇环 1.如果没有奇环, ...

  9. 【强联通分量缩点】【最长路】【spfa】CH Round #59 - OrzCC杯NOIP模拟赛day1 队爷的讲学计划

    10分算法:对于城市网络为一条单向链的数据, 20分算法:对于n<=20的数据,暴力搜出所有的可能路径. 结合以上可以得到30分. 60分算法:分析题意可得使者会带着去的城市也就是这个城市所在强 ...

  10. Maven多模块项目单独编译子模块项目时报错：Failed to execute goal on project/Could not resolve dependencies for project

    背景:常规的父子项目搭建的工程,参考:http://www.cnblogs.com/EasonJim/p/6863987.html 解决方法: 1.需要把parent工程,也就是package是pom ...