Underscore.js模板：模板變量未呈現

我剛剛開始使用jQuery和underscore.js來獲取使用JavaScript進行單頁應用程序開發的基礎知識。在進入任何客戶端MVC框架之前，我想了解一些更基本的東西，例如模板插入。Underscore.js模板：模板變量未呈現

我的問題：當HTML通過_.template（）渲染時，不會評估模板變量。該HTML：

<body> 
    <script id="app-view-1" type="text/template"> 
     <div id="app-view-1-container" class="app-workbench-container active-panel"> 
     <h2><%= title =></h2> 
     <ul class="choice-list"> 
      <li><a class="" id="" href="#" data-choice="choice 1"></a></li> 
      <li><a class="" id="" href="#" data-choice="choice 2"></a></li> 
     </ul> 
     </div> 
    </script> 

    <script id="app-view-2" type="text/template"> 
     <div id="app-view-2-container" class="app-workbench-container active-panel"> 
     <h2><%= title =></h2> 
     <form id="" class="input-panel active-panel" action="#"> 
      <input type="text" id="input-field-1" class="app-control"> 
      <input type="radio" id="radio-button-1" class="app-control" value="value-1">Value 1 
      <input type="submit" id="submit-button-1" class="app-control"> 
     </form> 
     </div> 
    </script> 

    <header id="app-header"> 
     <h1>Single Page App (SPA) Test</h1> 
     <nav id="main-menu-panel"> 
     <ul id="main-menu"> 
      <li class="main-menu-item"><a id="view-1" class="" data-target="app-view-1" href="#">View 1</a></li> 
      <li class="main-menu-item"><a id="view-2" class="" data-target="app-view-2" href="#">View 2</a></li> 
      <li class="main-menu-item"><a id="view-3" class="" data-target="app-view-3" href="#">View 3</a></li> 
     </ul> 
     </nav> 
    </header> 

    <main id="app-body"> 
     <p class="active-panel">Different app partials come here...</p> 
    </main> 

    <footer></footer> 

    <script src="js/vendors/jquery/jquery-1.10.2.min.js"></script> 
    <script src="js/vendors/node_modules/underscore/underscore-min.js"></script> 
    <script src="js/app.js"></script> 

    </body>

而這裏的app.js的JavaScript的，太：

$(document).ready(function(){ 
    console.log("Application ready...\n"); 
    $(".main-menu-item").on("click", "a", function(event){ 
    var target = $(this).data("target"); 
    var partial = _.template($("#" + target).html()); 
    event.preventDefault(); 
    $(".active-panel").remove(); 
    $("#app-body").append(partial({title : target})); 
    }); 
});

然而，「<％=標題=>」出現在渲染輸出一個字符串，實際title（應該已經在partial（）函數中分配）不會出現。這裏有什麼問題？任何幫助深表感謝。

來源

2013-11-20 Bunjip

您的模板有誤。您正在使用<%= ... =>，而它應該是<%= ... %>。

按照來自underscore documentation的信息，他們提供了以下示例。

var compiled = _.template("hello: <%= name %>"); 
compiled({name: 'moe'}); // returns "hello: moe"

支持underscore.js模板標籤：

<% ... %>腳本執行
<%= ... %>插值變量（打印）
<%- ... %>插值變量，並將它被HTML轉義

編輯

我用this jsFiddle。將來請提供這樣的例子，它使每個人都更容易。 :)

來源

2013-11-20 14:54:38 atomman

Underscore.js模板：模板變量未呈現

回答

相關問題