HTML动态生成模板（2）

╰+攻爆jí腚メ 2022-08-21 11:54 249阅读 0赞

## **如何通过模板动态生成HTML代码？** ##

> ## 看过我写的（1）版本的可能都很清楚，如何通过text/html类型的script标签动态生成html代码。 ##
> 
> ### 那么今天我就和大家说说另一种更加牛掰的方式，那就是通过text/templete的script标签来动态生成代码。 ###
> 
> 需求还是和（1）一样，就是实现动态生成问卷调查，那么我们先看一下代码是怎样的？

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title>模板页的使用</title>
            <script src="../js/jquery-2.0.3.min.js"></script>
            <script src="../js/mui.min.js"></script>
            <link href="../css/mui.min.css" rel="stylesheet" />
            <script type="text/javascript" charset="UTF-8"> mui.init(); </script>
        </head>
    
        <body>
            <header class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">单选试题</h1>
            </header>
            <div class="mui-content">
                
    
            </div>
            <div style="text-align: center;margin-top:10px;">
                <button class="mui-btn mui-btn-blue" id="generate" style="width:80%">通过模板生成题目</button>
            </div>
        </body>
    
    </html>
    <script src="../js/jquery-2.0.3.min.js"></script>
    <script src="../js/arttmpl.js"></script>
    
    
    <script type="text/templete" id="radio-tigan">  <% for(var i in record){ var item=record[i]; %> <div class="question"> <h5 class="mui-content-padded" id="tigan<%=(i+1)%>"><%=item.title%></h5> <div class="mui-input-group" id="option<%=(i+1)%>">  <% for(var j in item.content){ var res=item.content[j]; %> <div class="mui-input-row mui-radio mui-left" id="item<%=(j+1)%>"> <label id="item-lab<%=(j+1)%>"><%=res.lab%></label> <input name="radio<%=(i+1)%>" id="item-rdo<%=(j+1)%>" type="radio"> </div> <% } %> </div> </div> <% } %> </script>
    <script> //相关的处理事件，动态获取时只需要将for循环替换为AJAX的SUCCESS事件中去就好了。 $("#generate").on("click", function() { //利用图灵接口演示聊天布局 template.config('escape', false); //定义参数类型 var record = [{ "title": '题目1', "content": [{ "lab": "测试选项11" }, { "lab": "测试选项12" }, { "lab": "测试选项13" }, { "lab": "测试选项14" }] }, { "title": '题目2', "content": [{ "lab": "测试选项21" }, { "lab": "测试选项22" }, { "lab": "测试选项23" }, { "lab": "测试选项24" }] }]; //追加模板消息 var str = template('radio-tigan', { "record": record }); $(".mui-content").html(str); }) </script>

### 我们将上面的代码进行一个分析，可以看到在代码上和（1）有一个很明显的区别，就是我们不再需要在JS代码中使用for循环了。我们的模板也不需要进行拆分了。可以看到对应的模板结构更加清晰了。 ###

### **第一：我们将相关的资源引入进来，我们可以看到我们只需要引用arttmpl.js文件就好了。这个文件会在结尾的demo文件夹里。大家自行下载即可。** ###

### **第二：我们将模板写好，模板中可以使用js代码,代码使用<%%>包围起来即可。如下所示：** ###

<script type="text/templete" id="radio-tigan">
        
        <% for(var i in record){ var item=record[i]; %>
            <div class="question">
                <h5 class="mui-content-padded" id="tigan<%=(i+1)%>"><%=item.title%></h5>
                <div class="mui-input-group" id="option<%=(i+1)%>">
                    
                    <% for(var j in item.content){ var res=item.content[j]; %>
                        <div class="mui-input-row mui-radio mui-left" id="item<%=(j+1)%>">
                            <label id="item-lab<%=(j+1)%>"><%=res.lab%></label>
                            <input name="radio<%=(i+1)%>" id="item-rdo<%=(j+1)%>" type="radio">
                        </div>
                        <% } %>
                </div>
            </div>
            <% } %>
    </script>

### \*\*第三步：我们需要组件JSON数据如下所示： ###

var record = [{
                "title": '题目1',
                "content": [{
                    "lab": "测试选项11"
                }, {
                    "lab": "测试选项12"
                }, {
                    "lab": "测试选项13"
                }, {
                    "lab": "测试选项14"
                }]
            }, {
                "title": '题目2',
                "content": [{
                    "lab": "测试选项21"
                }, {
                    "lab": "测试选项22"
                }, {
                    "lab": "测试选项23"
                }, {
                    "lab": "测试选项24"
                }]
            }];

### **第四：将相关的数据绑定到模板上即可** ###

//追加模板消息
    var str = template('radio-tigan', {
            "record": record
    });
    $(".mui-content").html(str);

### **是不是很简单，具体操作可以下载Demo自己体验下看看** ###

### \*\*下载链接：[立即下载][Link 1] ###

[Link 1]: http://download.csdn.net/detail/u013059555/9506718