使用underscore.js在HTML页面上实现JSP的forEach向页面循环赋值

这是之前公司的一个大佬写的，感觉还是很有用的，拿出来分享下，希望对你们有帮助。

这里用的是下划线，首先引入underscore.js  下载地址

封装方法：

function renderTemp(data, el, varName, isReplace) {
    // console.log('renderNote: ', data)
    document.getElementById('');
    if (!el._temp) {
        var $script = $(el).find('script');
        el._temp  = _.template($script.text(), {variable: varName});
        $script.replaceWith(el._temp(data));
    } else if (isReplace) {
        $(el).children().eq(0).replaceWith(el._temp(data))
    } else $(el).append(el._temp(data));
}

页面标签定义（以下拉为例，其他也可以）：

<select id="list">
    <script type="text/template">
            <!--需要循环显示的列表-->
            <option class="option" value="<%= data.XXX%>">//可以直接赋值value、attr
                <%= data.XXX%>//可以多个 <%= data.XXX%>
            </option>
    </script>
</select>

例如列表：

<div class="tabs-panel is-active" id="id">
    <ul data-inset="false"  id="list">
        <script type="text/template">
            <li class="li">
                <a href="XXX.html?id=<%= note.id %>" target="_top">//可以用于属性赋值
                    <div class="dashed">
                        <div class="note_box note_left box_relative">
                            <div class="note_box_title"><%= note.title %></div>
                            <div class="time1"><%= note.releasetime %></div>
                            <div class="figcaption">
                                <p class="twoline"><%= note.content %></p>
                            </div>
                         </div>
                    </div>
                </a>
            </li>
        </script>
    </ul>
</div>

调用封装方法进行赋值：

//例如xjax返回的数据：
success:function(data){
    var name = document.getElementById("list");//获取的是<script type="text/template"></script>上一个的标签元素
    for (var i = 0; i < data.length; i++) {
        //name是获取的节点也就是这里的select标签，第三个参数是定义标签<%= data.XXX%>里data.（自己定义）
        renderTemp(data[i], name, 'data')
    }
}

会出现的问题：异步循环显示时标签的内容会叠加，记得在循环之前$(".option").remove();或者empty一下。

<script type="text/template"></script>不能删除。

例如这里的select：$(".option").remove(); li则是：$('.li').empty(); 具体的可以自己尝试。

做完这三步就可以实现HTML的循环赋值了，下划线的用法还有很多想了解的可以看上面的连接文档。

 

我的第一个博客