mui 根据 json 数据动态创建列表

使用 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字符转换为实体形式（例如它会将双引号转换为"形式），用于避免XSS攻击。

当我们希望将数据中的HTML作为文本显示出来时，常常会使用<%- %>标签。

Underscore还允许你修改这3种标签的形式，如果我们想使用{% %}、{%= %}、{%- %}作为标签，可以通过修改templateSettings来实现，就像这样：

_.templateSettings = {    evaluate : /\{%([\s\S]+?)\%\}/g,    interpolate : /\{%=([\s\S]+?)\%\}/g,    escape : /\{%-([\s\S]+?)%\}/g
}

转载于:https://www.cnblogs.com/crazycode2/p/6911383.html

mui 根据 json 数据动态创建列表相关推荐

animate方法 jQuery中元素的创建创建十个p标签创建列表动态创建列表
animate方法 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
vue 渲染JSON数据动态生成表格组件
vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template><div id="viewDialog"><el-button typ ...
JavaScript基础实现动态创建列表
js基础获取元素的六种方式 : 1.通过ID获取获取单个元素2.通过类名获取取多个元素3.通过标签名获取获取多个元素4.通过name名获取获取多个元素5.通过querySelector()获 ...
Java 接收返回json数据动态取data里的值
json数据 data: {} {"code":200,"data":{"accountNonExpired":true,"acc ...
jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...
layui做折线图_详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏
layuiAdmin单页版根据后台使用模板方式加载菜单 lay-url="菜单接口" lay-headers="将token带入请求头",如果没有,去掉就行 ...
html根据数据动态创建表格,HTML　DOM动态创建表格（１）
table, td, th { border:1px solid black; color: red; } var txt = '[\ {\ "id":1,\ "name ...
Vue根据菜单json数据动态按需加载路由Vue-router
每个菜单项对应一个页面组件,根据菜单项动态按需加载路由路由配置的正确写法: /*router/index.js*/ import Vue from 'vue' import Router from ...
python列表动态添加_在Python中动态创建列表
我有一堆与不同组关联的项,我最终想为每个组创建一个列表,其中包含所有关联项.在问题是我不知道有多少组,所以如何动态生成正确数量的列表,以及如何调用它们?在我在循环item_list和group_l ...

mui 根据 json 数据动态创建列表

mui 根据 json 数据动态创建列表相关推荐

最新文章

热门文章