2013-03-28 117 views
0

當與Backbonejs這個網站碼被打開瀏覽器的Java腳本控制檯拋出以下錯誤模板錯誤 - uncaught TypeError: Cannot call method 'replace' of undefined, 但是當我除去從List_view'sinitialize方法含有underscore模板的使用this.template = _.template($('#listing').html()) 代碼這一行它的工作正常。爲什麼下劃線模板的用法會引發錯誤? 下面是代碼下劃線與backbonejs

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Example Backbone Whisky APP</title> 
    </head> 
    <body> 
    <script src="LIB/json2.js"></script> 
    <script src="http://underscorejs.org/underscore.js"></script> 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="http://backbonejs.org/backbone.js"></script> 
    <script type = "text/template" id="listing"> 
     <li>%= value %</li> 
    </script> 
    <script> 

     Whisky = Backbone.Model.extend(); 
     firstWhisky = new Whisky({ 
     name : 'Blenders Pride' 
     }); 
     Whiskies = Backbone.Collection.extend({ 
     Model:Whisky , 
     url:"#" 
     }); 


     first_view = Backbone.View.extend({ 
     el : 'body', 
     initialize : function() { 
      this.$el.empty(); 
      this.render(); 
     } , 


     render : function() { 
      this.$el.append("<h1>The Whisky APP</h1>"); 
     this.list_view = new List_view(); 
      this.$el.append(this.list_view.render().el); 
      return this ; 
     } 
     }); 
     List_view = Backbone.View.extend({ 
     tagName : 'ul' , 
     initialize : function() { 
      this.template = _.template($('#listing').html()); 
     } , 
     render : function() { 
      this.$el.empty(); 
      this.$el.append("<li>Royal stag</li>"); 
      this.$el.append("<li>Signature </li> "); 
      return this ; 
     } 
     }); 
     index_view = new first_view();  
    </script> 
    </body> 
</html> 

回答

1

的問題是,你要$("#listing").html()調用返回undefined作爲元素還不可用。您需要等待DOM加載才能通過ID訪問元素。你可以通過內嵌簡單的alert來確認。您需要延遲檢索,直到DOM準備就緒。

在這種情況下,這是因爲您已經獲得了正文中的腳本標籤,使得它們在您請求它們時不可用。移動腳本標記(和模板),並且它會工作:

你必須

http://jsbin.com/obahux/2/

一個問題是,你的語法是不對的,你應該使用<%%>執行代碼或發射值:

<script type = "text/template" id="listing"> 
    <li><%= value %></li> 
</script> 
+0

非常感謝...現在它的工作正常..你是對的...非常感謝你花費在幫助我的時間.. –

0

這是因爲,在你的first_view初始化函數你這個結算EL。$ el.empty(),讓身體空的,沒有什麼在那裏,在那裏所有的腳本和模板會被中省略。

您可以找到一個更好的解決方案來清除它。或者只是把它包裹在另一個div標籤

+0

即使當這條線'這。 $ el.empty()'被取出它沒有工作,但第一個建議的答案這個帖子工作得很好....感謝您花費在試圖幫助我的時間.. –