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

最新推荐文章于 2021-06-10 14:26:55 发布

weixin_34130269

最新推荐文章于 2021-06-10 14:26:55 发布

阅读量568

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/crazycode2/p/6911383.html

本文介绍如何使用Underscore.js中的模板功能来组织页面结构和逻辑，通过具体实例展示了如何定义和渲染模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 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