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

最新推荐文章于 2024-02-08 08:34:57 发布

Celine_xn

最新推荐文章于 2024-02-08 08:34:57 发布

阅读量2.2k

点赞数

分类专栏： Javascript/juery

本文链接：https://blog.csdn.net/nceliy/article/details/51435450

版权

Javascript/juery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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的使用了。

Celine_xn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
渲染模板template_(内容管理系统总结3)

2 template模板渲染因为前面的总结中看到了script type=”text/html” ，在总结这章的时候又看到了script type=”text/template”，所以我就顺便的研究了下这个type的意义。必需的 type type：规定脚本的 MIME 类型。 MIME 类型：(Multipurpose Internet Mail Extensions) 是描述消息内容类
复制链接

扫一扫