Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ejs模版的使用摘要 #22

Open
hehongwei44 opened this issue Oct 27, 2015 · 0 comments
Open

ejs模版的使用摘要 #22

hehongwei44 opened this issue Oct 27, 2015 · 0 comments

Comments

@hehongwei44
Copy link
Owner

概述

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant