2012-12-26 62 views
1

好的,所以我的問題是非常基本的。我使用帶有Underscore的Node.js作爲註冊模板引擎,使用Expressjs框架。我正在嘗試創建部分。我希望能夠做一些類似於其他語言的工作:Node.js和underscore.js - 模板

<% 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線了意見目錄,模板工程的指定只是名字在項目的其他部分)。它現在不能解析頁眉和頁腳模板。

+0

因爲underscore.js模板只包含JavaScript,你不能做''<%_.template(...);%> '在你的模板中?如果這是不可能的,我會建議簡單的第一個正則表達式 - 在調用'_.template'前用你的目標替換你的'include', –

+0

告訴你這是一個基本的問題。 new to underscore ... Soo ...非常感謝。:)工作。如果喲你想提交一個答案,我會投票。 –

+0

等一下,那實際上沒有用。它擺脫了錯誤,但它不能正確解析模板。 –

回答

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/