Node.js和underscore.js – 模板

好的,所以我的问题是非常基本的。 我正在使用Node.js和Underscore作为注册的模板引擎,使用Expressjs框架。 我正在尝试创build部分。 我希望能够做到像你用其他语言做的事情:

<% include('header') %> <body id="content"> <span>Blah</span> </body> <% include('footer') %> 

你明白了。 那么,有没有人知道一种方法,使这可能使用下划线节点?

编辑:

 <% var isReturned = false; var isSuccess = false; if(typeof user != 'undefined'){ var isReturned = true; } if(typeof errors == 'undefined'){ var errors = null; } if(typeof success != 'undefined'){ isSuccess = true; } %> <% _.template('header') %> <h1><%= title %></h1> <% if(isSuccess){ %> <div style="background-color: green; border: 1px solid black; color: white; width: auto; display: inline-block; padding: 0.5em; border-radius: 5px;">You have successfully registered! <a href="/login">Click Here</a> to login.</div> <% } %> <form id="register" name="register" action="/register" method="POST"> <table> <tr> <td> <label for="firstName">First Name:</label> </td> <td> <input type="text" size=15 name="firstName" value="<% if(isReturned){ %> <%= user.firstName %> <% } %>"/> </td> <% if(errors != null && typeof errors.firstName !== 'undefined' && errors.firstName !== null){ %> <td class="error"><%= errors.firstName.msg %></td> <% } %> </tr> <tr> <td> <label for="lastName">Last Name:</label> </td> <td> <input type="text" size=15 name="lastName" value="<% if(isReturned){ %> <%= user.lastName %> <% } %>"/> </td> <% if(errors != null && typeof errors.lastName !== 'undefined' && errors.lastName !== null){ %> <td class="error"><%= errors.lastName.msg %></td> <% } %> </tr> <tr> <td> <label for="email">E-mail:</label> </td> <td> <input type="text" size=15 name="email" value="<% if(isReturned){ %> <%= user.email %> <% } %>"/> </td> <% if(errors != null && typeof errors.email !== 'undefined' && errors.email !== null){ %> <td class="error"><%= errors.email.msg %></td> <% } %> </tr> <tr> <td> <label for="password">Password:</label> </td> <td> <input type="password" size=15 name="password"/> </td> <% if(errors != null && typeof errors.password !== 'undefined' && errors.password !== null){ %> <td class="error"><%= errors.password.msg %></td> <% } %> </tr> <tr> <td> <label for="confirm">Confirm Password:</label> </td> <td> <input type="password" size=15 name="confirm"/> </td> <% if(errors != null && typeof errors.confirm !== 'undefined' && errors.confirm !== null){ %> <td class="error"><%= errors.confirm.msg %></td> <% } %> </tr> <tr> <td colspan=2> <input type="submit" size=15 name="submit" value="Register"/> </td> </tr> </table> </form> <% _.template('footer') %> 

这是我得到的评论后我(我没有指定一个具体的url,因为expressjs连接了一个意见目录,并指定模板的名称在项目的其他部分工程)。 它只是不解决现在的页眉和页脚模板。

虽然underscore.js的模板引擎是非常基本的,但是模板可以执行任意JavaScript代码的事实可以让你做任何事情。

我设置了这个小帮手函数来渲染基于脚本块的模板:

 _.include = function(id, data) { var template = document.getElementById(id).innerHTML; return _.template(template)(data); } 

这个HTML和模板的组合:

 <script type="text/html" id='header'> This is the header </script> <script type="text/html" id='footer'> This is the footer </script> <script type="text/html" id='full'> <%= _.include('header') %> <h1><%= title %></h1> <%= _.include('footer') %> </script> <div id='target'> This text will be replaced by the output of rendering the templates </div> 

有了这些,就像渲染模板,页眉和页脚一样简单:

 document.getElementById('target').innerHTML = _.include('full', { "title": "Title"}); 

请注意,我不会将任何内容传递给模板中的_include调用。 你可能会传递你得到的参数(我只是没有去查找上下文variables的名字),或者你可以明确地传递一个新的对象,无论页眉和页脚需要什么:

 <%= _.include('header', { 'title': title }) %> 

包含代码和HTML的小提琴可以在这里find: http : //jsfiddle.net/tUzcU/2/