2013-05-14 118 views
1

這裏是我的代碼:下劃線/骨幹:「_未定義」

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Matt's Template</title> 

     <!-- Stylesheets --> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" /> 
     <link rel="stylesheet" href="../stylesheets/general.css" type="text/css" /> 

     <style type="text/css"> 
      .dragndrop { 
       position:relative; 
       margin:30px auto; 
       border:4px dashed #000; 
       border-radius: 25px; 
       padding:50px; 
       text-align: center; 
      } 
      table{ 
       width:100%; 
      } 
      tr{ 
       width:100%; 
      } 
      td, th { 
       padding:10px; 
       border:1px solid #000; 
       width:50%; 
       text-align: center; 
      } 
     </style> 
    </head> 
    <body> 
      <section class="container"> 

       <!--<form action="/file-upload" method="post" enctype="multipart/form-data"> 
        <input type="file" name="file" /> 
        <input type="submit" /> 
       </form>-->  
       <form action="/file-upload" class="dropzone dragndrop" id="my-awesome-dropzone"></form>  

       <section id="skills"> 

       </section> 


       <script type="text/template" id="skillsTemplate"> 
        <section> 
         <table> 
          <tr> 
           <th>Skill</th> 
           <th>Value</th> 
          </tr> 
          <% _.each(items, function(item){ %> 
            <tr> 
             <td><%= item.get('name') %></td> 
             <td><%= item.get('value') %></td> 
            </tr> 
          <% }); %> 
          <tr> 
           <td><button id="newSkill">New</button></td> 
          </tr> 
         </table> 
        </section> 
       </script> 
      </section> 

     <!-- Javascript Libraries --> 
     <script type="text/javascript" src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script> 

     <script type="text/javascript"> 
      SkillsView = Backbone.View.extend({ 
       render : function(){ 
        var template = _.template($('#skillsTemplate').html(), [{ name:"Linux", value:"Test"}]); 

        this.$el.html(template); 
       } 
      }); 

      var skillsview = new SkillsView({el : $('#skills') }); 

      skillsview.render(); 


     </script> 
     <!-- My Javscript --> 
    </body> 
</html> 

唯一重要的部分是下劃線的模板不工作。這是說,線上的'_':_.each(items, function(item)是未定義的。這是爲什麼發生?我試着將包含下劃線的腳本移動到頁面的頂部,這沒有幫助。

回答

2

我無法重現「_沒有定義」的問題,但我沒有找到,你可能會遇到了另一個問題:你引用的項目作爲變量items,但你從來沒有告訴過_.template你想要的數據將在items。使用對象文本的數據:

_.template($('#skillsTemplate').html(), { 
    items: [{ name:"Linux", value:"Test" }] 
}) 

(另外,你使用item.get('name')當數據是一個普通的對象,而不是下劃線模式,但我認爲這只是從您的原始代碼的殘餘後你簡化你的代碼的問題。)

+0

哦,我想我明白了爲什麼它這樣做......所以我用ExpressJS與和的NodeJS表達是使用EJS渲染引擎。所以我認爲當我使用<% %>時,它認爲我正在訪問來自嵌入式JavaScript的數據。你認爲這是嗎?它在服務器端而不是客戶端出現錯誤 – 2013-05-14 05:45:02

+1

@MattHintzke:是的,這聽起來似乎合理。看看[這個問題](http://stackoverflow.com/q/9021587)。 – icktoofay 2013-05-14 06:00:39

+0

你是老闆。這絕對是爲什麼 – 2013-05-14 06:17:52