渲染模板template_(内容管理系统总结3)

来源：互联网发布：药丸知乎编辑：程序博客网时间：2024/06/07 05:56

2 template模板渲染

因为前面的总结中看到了script type=”text/html” ，在总结这章的时候又看到了script type=”text/template”，所以我就顺便的研究了下这个type的意义。

必需的 type type：规定脚本的 MIME 类型。
MIME 类型：(Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据

所以我们通过这个type类型来分析用那个解析器来解析这段代码。

这个渲染模板是underscore里边的方法，所以我们要引用的是underscore.js这个js文件
首先看个能跑起来的代码把，其实也就是相对于上一章的render渲染改了一点：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="jquery-1.10.2.min.js"></script>    <script src="ejs.js"></script>    <script src="underscore.min.js"></script>    <style type="text/css">        .test{            display:table;            height:400px;            width:400px;            background:#99cc99;            border-radius:5px;            border:1px solid #f70;        }        .test > span{            display:table-cell;            vertical-align:middle;            text-align:center;        }        .test > span > img{            height:200px;            width:200px;            border-radius:50%;            box-shadow:1px 1px 3px rgba(0,0,0,.5);            display: inline-block!important;        }        .hide{            display: none!important;        }    </style>    <script id="testName" type="text/html">        <div class="name">            <ul class="<%= nameType%>">                <% for(var i= 0;i<data.info.list.name.length;i++) { %>                    <li class="list"><%= data.info.list.name[i] %></li>                <% } %>            </ul>        </div>    </script></head><body>    <div class="test">        <span><img class="hide" src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span>        <a href="www.baidu.com">点我喽！</a>    </div>    <script>        function render(id, data, isJQuery) {            var html = new EJS({                element: id            }).render(data);            return isJQuery ? $(html) : html;        }        $(".test").click(function(){            alert("test测试");        });        $(".test img").click(function(){            alert("img测试");            return false;        });        $(".test a").click(function(){            alert("哈哈，我就是来阻止你的~");            return false;        });        var data = {            info : {                list:{                    name:["hello","nihao","xining"]                }            }        }        // var $nameHtml =render(testName,{data:data,nameType:"nameul"});        // var $nameHtml =new EJS({element:testName}).render({data:data,nameType:"nameul"});        var $nameHtml = _.template($("#testName").html())({data:data,nameType:"nameul"});        $("body").append($nameHtml);    </script></body></html>

这个代码很好理解，这里没有统一的定义template方法，因为template这个比较方便的，所以就没有写总体的方法了。

underscore.js还有很多的其他的方法，都可以使用的。推荐underscore.js的中文文档查看：
underscore.js中文文档查看
_.方法名:这其实就是标准的underscore.js的使用了。

0 0