编辑：

Question

好吧，所以我的问题非常基本。我正在使用带有Underscore的Node.js作为注册的模板引擎，使用Expressjs框架。我正试图创造局部。我希望能够像你用其他语言做的那样：

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

<% include('footer') %>

你明白了。那么，有没有人知道如何在Node上使用下划线来实现这一点？

编辑：

<%
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连接了一个视图目录，并且只指定了模板的名称在项目的其他部分中工作）。它现在无法解析页眉和页脚模板。

Answer 1

尽管underscore.js的模板引擎非常基本，但模板可以执行任意JavaScript代码这一事实使您可以执行任何操作。

我设置了这个小助手函数，根据带有id：

的脚本块渲染模板

_.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调用。你可以传递你得到的参数（我只是没有查找上下文变量的名称）或者你可以显式传递一个新的对象，无论页眉和页脚需要什么：

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

可以在此处找到包含代码和HTML的小提琴：http://jsfiddle.net/tUzcU/2/

Node.js和underscore.js - 模板化

编辑：

1 个答案: