1

好的，所以我的问题非常基本。我正在使用带有下划线的 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 连接了一个视图目录，并且只指定模板的名称适用于项目的所有其他部分）。它现在只是不解析页眉和页脚模板。

4

1 回答 1

4

尽管 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/

于 2012-12-26T18:18:36.500 回答