Question

当打开Backbonejs的这个html代码时，Chrome Java脚本控制台会抛出以下错误 - uncaught TypeError: Cannot call method 'replace' of undefined，但当我删除包含underscore模板this.template = _.template($('#listing').html())用法的一行代码时从List_view's initialize方法开始工作正常。为什么使用下划线模板抛出错误？这是代码

<!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>

Answer 1

问题是，您对$("#listing").html()的调用正在返回undefined，因为该元素尚未提供。您需要等待DOM加载以按ID访问元素。您可以通过简单的alert内联来确认这一点。您需要延迟检索，直到DOM准备好。

在这种情况下，这是因为你已经在正文中获得了脚本标记，使它们在你请求它们时不可用。移动脚本标签（和模板），它将起作用：

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

您遇到的一个问题是您的语法错误，您应该使用<%和%>来执行代码或发出值：

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

Answer 2

那是因为，在你的first_view初始化函数中，你正在清理这个。$ el.empty（），它使得体空，并且那里没有任何东西，那里的所有脚本和模板都会被省略。

您可以找到更好的解决方案来清除它。或者只是将其包装在另一个div标签中

使用backbonejs下划线模板错误

2 个答案: