ejs模版的使用摘要


概述

ejs模版是我比较喜欢而且常用的模版引擎,一方面它的语法和java中的velocity相似,另一位方面完全把视图解耦出来,性能也比较出色,所以成为我模版选型的不二之选。

核心概念

我们先从一个简单的示例来看看ejs模版的用法吧。ejs模版的核心分别是模版、数据、和渲染。对应的代码分别如下:

数据

    var data = {
        title: "ejs模版测试"
    };

ejs模版使用的数据是标准的javascript对象,曾经视图传一个数组进去,但是渲染不出来。所以我们最好传一个Object对象给ejs模版引擎。

模版(view/title.ejs)

<h1 id="title"><%= title %></h1>     

模版是一个单独的ejs格式的文件,虽然这不是强制性的,但是结构一下清晰明了。模版里有它特殊的语法。比如:
<%= title %>的作用就是显示数据传递过来的title字段。

渲染

    var temp = new EJS({
        url : "view/title.ejs"
    }).render(data);  

ejs是通过调用render方法把数据传入模版引擎的。这也是连接数据与模版的桥梁。

完整的示例代码如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ejs模版测试</title>
    <script type="text/javascript" src="lib/ejs.js"></script> <!--引入ejs核心文件-->
</head>
<body>
<h1 id="title"></h1>
<script>
    //模版需要用到的数据
    var data = {
        title: "ejs模版测试"
    };

    var title = document.getElementById('title');
    //模版渲染
    title.innerHTML = new EJS({
        url : "view/title.ejs"     //模版的地址
    }).render(data);
</script>
</body>
</html>

模版语法

简单的输出

<%= title %> //输出数据中title中对应的值的内容

循环

{   title:  'Cleaning Supplies'
    supplies:   ['mop', 'broom', 'duster']  
}

<% for(var i=0; i<supplies.length; i++) {%>
    <li><%= supplies[i] %></li>
<% } %>    

判断

    <% if ( defaultindex == "select") { %>
        <li class="active" %>"></li>
    <% } else { %>     //这里不能分开写
        <li></li>
    <% } %>

以上几种语法基本可以应付常用的结构了,当然我们还可以拓展。它向我们平常写脚本一样,只不过我们要主要不要出错。

核心API

render

/*第一次渲染的时候调用该方法,返回值是被数据填充的模版*/    
html = new EJS({url: '/template.ejs'}).render(data)      

update

/*当数据有更新的时候,调用update方法*/
new EJS({url: '/template.ejs'}).update(document.body, data2)    

拓展(view.js)

EJS官网除了提供其核心功能外,还提供了常用的标签的封装。
示例如下:

/*link_to封装了`a`标签*/
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
    <li><%= link_to(supplies[i], 'supplies/'+supplies[i]) %></li>
<% } %>
</ul>


/*img_tag封装了img标签*/
<%= img_tag('images/maid.png') %>

高级特性

模版缓存

为了最大提高模版的性能,默认是开启了缓存的,所以遇到下面的代码,content.ejs模版只会被加载一次.

    <script type='text/javascript'>
        new EJS({url: 'templates/content.ejs'}).update('content1', {});
        new EJS({url: 'templates/content.ejs'}).update('content2', {});
    </script>

当然我们可以手动关闭缓存:

EJS.config({cache: false});

这样的话,如果遇到上面的代码,content.ejs会被加载两次。

模版嵌套

模版可以嵌套:示例如下:

<h2>This is from the containing template</h2>
<div class='template'>
    <%= this.partial({url: 'templates/partial.ejs'}) %>
</div>

该模版中包含一个子模版partial.ejs。这样对结构重用有很大的益处。

相关链接:

官网地址:http://www.embeddedjs.com/


7 responses on “ejs模版的使用摘要

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>