5

Google Chrome 开发者工具控制台抛出此错误：

uncaught reference error: backbone is not defined

当这个 html 文件包含带有库主干.js 的 javascript 时：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example Backbone APP</title>
  </head>
  <body>

    <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' , 
        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>
    <script src="LIB/json2.js"></script> 
    <script src="LIB/underscore-min.js"></script>  
    <script src="http://code.jquery.com/jquery.js"></script>  
    <script src="http://backbonejs.org/backbone.js"></script> 
  </body>
</html>

这个错误的原因是什么？

4

3 回答 3

6

您不能在声明之前使用 Backbone。

将<script>标签放在您自己的 javascript 代码之前。

您必须像这样重新组织您的 javascript 部分：

<script src="LIB/json2.js"></script> 
<script src="LIB/underscore-min.js"></script>  
<script src="http://code.jquery.com/jquery.js"></script>  
<script src="http://backbonejs.org/backbone.js"></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' , 
    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>
于 2013-03-28T12:32:59.430 回答
2

这可能是相关的。我正在使用以下链接从http://cdnjs.com 托管库将 jQuery、Underscore 和 Backbone 加载到我的 index.html ：

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

结果，我可以在 Chrome 中访问 $、_ 和 Backbone，但如果我尝试在 Firefox 中打开页面，我会得到：未捕获的 ReferenceError：Backbone 未定义。但是，当使用 Eric Leschinski 提供的链接时：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>

一切正常。

于 2014-09-06T21:46:35.837 回答
1

如何用尽可能少的行重现此错误：

<html>
<body>
<script type="text/javascript">
    var AppView = Backbone.View.extend({
    });
</script>
<div>mydiv</div>
</body>
</html>

你得到一个错误：

ReferenceError: Backbone is not defined
var AppView = Backbone.View.extend({

您没有包含必要的主干库。

如果您收到此错误，请执行以下 Hello world 示例：

此示例定义了主干：

<html>
<body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>

  <div>Loading...</div>

  <script type="text/javascript">
    alert("starting backbone");
    var AppView = Backbone.View.extend({
      el: 'div',
      initialize: function(){
        alert("initializing backbone");    
        this.render();
      },
      render: function(){
        alert("applying text to div attribute");
        this.$el.html("Hello World");
      }
    });
    var appView = new AppView();
    alert("done");
  </script>
</body>
</html>

要在 jsfiddle 中运行此示例，请参见此处：http: //jsfiddle.net/ZfnbK/

它应该显示 4 个弹出框，说明它通过代码所采用的路径。当调用 render 函数时，backbone 使用 jQuery 将 div 标签的内容替换为：“Hello World”。

于 2014-02-27T19:00:00.737 回答