EJS的CommonJs规范版本

ejs分为两个版本一个是CommonJs版本,另外一个是AMD规范的版本.

基础：html页面

安装：<script type="text/javascript" src="./node_modules/ejs/ejs.js"></script>

检查：ejs会将自身挂载到window对象上,所以你只要console.log(ejs)控制台有输出就说明安装成功了.

调试：在浏览器中

注意：和AMD规范版本不同，EJS的CommonJs版本要写在html中

查看是否成功引入ejs

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./ejs.min.js"></script>

    <script>

        window.onload = function() {

            console.log(ejs);

        }

    </script>

</head>

<body>

</body>

</html>

渲染单个数据

方法一：ejs.render(str，data，options)

实例一：

// 14.html内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./ejs.min.js"></script>

    <script>

        window.onload = function() {

            var string = ejs.render('<h2><%= title %></h2>',{title:'hello'});

            document.getElementsByTagName('body')[].innerHTML = string;

        }

    </script>

</head>

<body>

</body>

</html>

// 在浏览器中打开页面输出 hello

实例二：

// 实际应该展示在页面上的Dom

<div id="interpolation"></div>

// 模版

<script id="interpolationtmpl" type="text/x-dot-template">

    <!-- 新增用户弹窗 -->

    <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog"

         aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;">

        <div class="q-popup-modal modal-dialog" style="width: 900px;background-color: #ffffff;">

            <div class="popup-header modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                {{? it.data && it.data.id}}

                更新计划

                {{??}}

                新增计划

                {{?}}

            </div>

        </div>

    </div>

</script>

// 编译和渲染

jQuery.ajax({

     type: "get",

     url: "http://",

     dataType: "json",

     success: function (result) {

     if (result && "" == result.code && result.json) {

          var str = ejs.render($("#interpolationtmpl").text(),result.json); // 取到模版并使用数据渲染

　　　     $("#interpolation").html(str); // 添加进之前准备好的Dom

        }

     }

 });

方法二：ejs.compile(str，options)(data)

// 实际应该展示在页面上的Dom

<div id="interpolation"></div>

// 模版

<script id="interpolationtmpl" type="text/x-dot-template">

    <!-- 新增用户弹窗 -->

    <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog"

         aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;">

        <div class="q-popup-modal modal-dialog" style="width: 900px;background-color: #ffffff;">

            <div class="popup-header modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                {{? it.data && it.data.id}}

                更新计划

                {{??}}

                新增计划

                {{?}}

            </div>

        </div>

    </div>

</script>

// 编译和渲染

jQuery.ajax({

     type: "get",

     url: "http://",

     dataType: "json",

     success: function (result) {

     if (result && "" == result.code && result.json) {

          var template = ejs.compile($("#interpolationtmpl").text()); // 取到模版

          var rs = template(result.json); // 使用数据渲染

　　　     $("#interpolation").html(rs); // 添加进之前准备好的Dom

        }

     }

 });

巴特西

EJS学习（五）之EJS的CommonJs规范版本

EJS的CommonJs规范版本

查看是否成功引入ejs

渲染单个数据

方法一：ejs.render(str，data，options)

方法二：ejs.compile(str，options)(data)

其他用法和AMD规范的版本相同

最新文章

热门文章