2014-04-20 63 views
0

我有一個index.html文件,我使用Backbone.js從localhost獲取列表,並呈現結果以通過模板和Underscore.js查看div class「page 「使用模板腳本ID」project-table-summary「。_在Backbone/Express應用程序的ejs中未定義

當我跑我收到以下異常程序:

enter image description here

的index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../assets/ico/favicon.ico"> 

    <title>Template for Project</title> 

    <!-- Custom styles for this template --> 
    <link href="styles/bootstrap.min.css" rel="stylesheet"> 
    <link href="styles/sticky-footer.css" rel="stylesheet"> 
    <link href="styles/main.css" rel="stylesheet"> 

</head> 

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 

     <div class="page"></div> 

     <!-- TEMPLATE --> 
     <script type="text/template" id="project-table-summary"> 
     <% _.each(projects, function(project) { %> 
      <h2 class="sub-header">hey render</h2> 
      <div class="table-responsive"> 
      <table class="table table-striped"> 
       <thead> 
       <tr> 
       <th>Index</th> 
       <th>Header</th> 
       <th>Header</th> 
       <th>Header</th> 
       <th>Header</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td>1</td> 
       <td>Lorem</td> 
       <td>ipsum</td> 
       <td>dolor</td> 
       <td>sit</td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
     <% }) %> 
     </script> 

    </div> 

    <!-- Begin page content --> 
    <div class="footer"> 
     <div class="container"> 
     <p class="text-muted">my page</p> 
     </div> 
    </div> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/docs.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script> 

    <script> 
     $.ajaxPrefilter(function(options, originalOptions, jQXHR) { 
     options.url = 'http://localhost:1230' + options.url; 
     }); 

     var Projects = Backbone.Collection.extend({ 
     url:'/proj' 
     }); 

     var ProjectView = Backbone.View.extend({ 
     el:$('.page'), 
     render: function() { 
      console.log('in render projectview'); 
      var that = this; 
      var projects = new Projects(); 
      projects.fetch({ 
      success: function(projects) { 
       var template = _.template($('#project-table-summary').html(), {projects: projects.models}); 
       that.$el.html(template); 
      } 
      }); 
     } 
     }); 
     var projectView = new ProjectView(); 
     projectView.render(); 
    </script> 
    </body> 
</html> 

在我看來,我進口腳本依賴正確的,我的Backbone.js的在發送內容查看之前,獲取操作確實可以通過註銷內容進行驗證。但是,有一些肯定是錯誤的,我認爲這是使用Backbone.js的Underscore.js的一個錯誤實現,我無法識別。如果你能確定發生了什麼並給我一些線索,我將不勝感激。謝謝。

+0

這個錯誤是來自node.js還是瀏覽器? –

+0

錯誤來自瀏覽器,對不起,不清楚 – aug2uag

+1

那麼爲什麼'/用戶/ node_modules/ejs/lib/ejs.js'抱怨?整個堆棧跟蹤看起來像node.js和Express的東西給我。如果使用'_.templateSettings'將客戶端模板分隔符更改爲'<%...%>'以外的內容,然後更改模板,會發生什麼?我認爲你的服務器代碼試圖解釋'<% ... %>'的東西,你的服務器抱怨它沒有定義'_'。 –

回答

1

這個錯誤看起來並不像它來自瀏覽器。在堆棧跟蹤中存在/Users/node_modules/ejs/lib/ejs.js和其他node.js和Express事件表明錯誤來自服務器。很多東西都使用<% ... %>作爲模板,也許你的服務器端代碼就是其中之一,錯誤實際上來自你的服務器。

找出(並可能解決問題)的一種快速簡便的方法是更改​​模板分隔符。您可以通過use different regexes with Underscore設置_.templateSettings值:

如果ERB風格的分隔符是不是你的那杯茶,你可以改變下劃線的模板設置,使用不同的符號來襯托插值代碼。限定插值正則表達式來匹配應該逐字插值表達式,一個逃逸正則表達式來匹配應該是HTML轉義後插入表達式和一個評估正則表達式匹配的表達式應該沒有插入進行評估到所得到的串。

所以,你可以添加到您的客戶端代碼:

_.templateSettings = { 
    evaluate : /\{\{([\s\S]+?)\}\}/g, 
    interpolate : /\{\{=([\s\S]+?)\}\}/g, 
    escape  : /\{\{-([\s\S]+?)\}\}/g 
}; 

然後用{{ ... }}{{= ... }}{{- ... }}在模板中得到車把十歲上下的模板。一定要定義所有三個正則表達式,並且make sure they don't overlap in unexpected ways

+0

謝謝你的深思熟慮。非常感激。 – aug2uag

相關問題