Question

我正在尝试学习Backbone.js。问题是我无法运行在线教程中提供的最简单的示例（例如http://arturadib.com/hello-backbonejs/docs/1.html）。我唯一能想到的是大多数教程是围绕Backbone 0.3.x编写的。当前版本是0.9.x.如果有人能详细说明为什么以下不起作用，我将非常感激。

backbone_test.js：

(function($){

  // **ListView class**: Our main app view.
  var ListView = Backbone.View.extend({    
    el: $('body'), // attaches `this.el` to an existing element.
    // `initialize()`: Automatically called upon instantiation. Where you make all types of bindings, _excluding_ UI events, such as clicks, etc.
    initialize: function(){
      _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods

       this.render(); // not all views are self-rendering. This one is.
    },
    // `render()`: Function in charge of rendering the entire view in `this.el`. Needs to be manually called by the user.
    render: function(){
      $(this.el).append("<ul> <li>hello world</li> </ul>");
    }
  });

  // **listView instance**: Instantiate main app view.
  var listView = new ListView();      

})(jQuery);

backbone_test.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>
  <script type="text/javascript" src="./backbone_test.js"></script>
  <link rel="stylesheet" type="text/css" href="backbone_test.css">
  <title>Test</title>
</head>
<body>
</body>
</html>

Answer 1

实际上，当我将你的代码粘贴到jsFiddle中时，它工作得很好虽然如果你在jquery的文档就绪函数之外移动你的代码，我可以想象一些问题。

所以我在这里提出了一些建议：

var ListView = Backbone.View.extend({    
  el: 'body', // i gave a reference to the el, not the jquery object but the selector itself.

  initialize: function(){
    _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods
    this.setElement($(this.el)); // backbone 0.9.1 code, re-setting the element of your view this time, i set it to the $() jquery object of your selector  this.el.
    this.render(); // not all views are self-rendering. This one is.
  },

  // 
  render: function(){
    // and here instead of $(this.el) i use the cached jquery object of your view, this is also backbone 0.9.1 stuff.
    this.$el.append("<ul> <li>hello world</li> </ul>");
  }
});


// jquery's document ready function only to be used for firing up the application
(function($){

  // you still instantiate your listview once here
  var listView = new ListView();      

})(jQuery);

然而，即使进行了这些更改，您的代码仍然有用，你可以在这个jsFiddle中验证 http://jsfiddle.net/saelfaer/YZR9v/

Answer 2

我知道这是一个老问题，但对我而言，当我将索引html中的js版本更改为下面列出的时候，基本上我使用与教程相同的代码，而是加载建议的脚本它，我使用了Benjen的问题的代码示例中建议的js版本

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>

我复制粘贴的代码位于以下链接中：http://arturadib.com/hello-backbonejs/docs/1.html 我尝试将代码更改为上面建议的代码，但我无法使其工作。

摘要

的jquery 从1.6.1到1.7.1

下划线从1.1.6到1.3.1

骨干从1.1.0到0.9.1（*）

（*）我知道是旧版本但是我可以运行教程示例

无法获得最基本的Backbone.js“Hello World”示例

2 个答案: