Backbone.js backbonejs的下划线模板错误_Backbone.js_Underscore.js

Backbone.js backbonejs的下划线模板错误

backbone.js

Backbone.js backbonejs的下划线模板错误,backbone.js,underscore.js,Backbone.js,Underscore.js,打开此带有Backbonejs的html代码时，Chrome Java脚本控制台将抛出以下错误-uncaught TypeError:无法调用未定义的方法“replace”，但是当我删除这一行代码时，它包含了下划线模板this.template=..template（$（'.#listing'）.html（））从列表\u视图的初始化方法中，其工作正常。为什么使用下划线模板会引发错误？？这是密码 <!DOCTYPE html> <html> <head>

打开此带有Backbonejs的html代码时，Chrome Java脚本控制台将抛出以下错误-

uncaught TypeError:无法调用未定义的方法“replace”

，但是当我删除这一行代码时，它包含了

下划线

模板

this.template=..template（$（'.#listing'）.html（））

从

列表\u视图的

初始化

方法中，其工作正常。为什么使用下划线模板会引发错误？？这是密码

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


示例主干威士忌应用程序
%=价值%
威士忌=主干.Model.extend（）；
第一杯威士忌=新威士忌({
名称：“搅拌机骄傲”
});
威士忌=主干.Collection.extend({
型号：威士忌，
网址：“#”
});
第一个视图=Backbone.view.extend({
el:‘身体’，
初始化：函数（）{
这个。$el.empty（）；
这个。render（）；
} , 
render:function（）{
此.$el.append（“威士忌应用程序”）；
this.list_view=新列表_view（）；
this.$el.append（this.list\u view.render（）.el）；
归还这个；
}
});
List_view=Backbone.view.extend（{
标记名：“ul”，
初始化：函数（）{
this.template=..template（$（'.#listing'）.html（））；
} , 
render:function（）{
这个。$el.empty（）；
此.$el.追加（“皇家牡鹿””；
本.$el.附加（“签名””；
归还这个；
}
});
索引_视图=新的第一个_视图（）；

问题在于，您对

$（“#listing”）.html（）的调用返回了未定义的，因为元素还不可用。您需要等待DOM加载后才能通过ID访问元素。您可以通过执行简单的内联操作来确认这一点。您需要延迟检索，直到DOM准备就绪
在本例中，这是因为您在正文中有脚本标记，使得它们在您请求它们时不可用。移动脚本标记（和模板），它将工作：

您将遇到的一个问题是语法错误，您应该使用
执行代码或发出值：
<script type = "text/template" id="listing">
    <li><%= value %></li>
</script>



这是因为，在您的第一个视图initialize函数中，您正在用这个清除el。$el.empty（）使正文为空，其中没有任何内容，其中的所有脚本和模板都将被复制
您可以找到更好的解决方案来清除它。或者干脆用另一个div标签把它包起来
，即使这行this.$el.empty（）
被去掉了，它也不起作用，但是这篇文章的第一个建议答案很好…谢谢你花时间来帮我…非常感谢…现在工作很好..你是对的。。。非常感谢你花时间帮助我。。