1

さて、私の質問は非常に基本的なものです。Expressjs フレームワークを使用して、登録済みのテンプレート エンジンとして Underscore を使用して Node.js を使用しています。パーシャルを作成しようとしています。私はあなたが他の言語でやっていることのようなことができるようになりたいです:

<% 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 はビュー ディレクトリを接続し、テンプレートの名前だけを指定するだけでプロジェクトの他のすべての部分で機能するためです)。現在、ヘッダーとフッターのテンプレートが解決されていません。

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 に答える