BackboneJS HelloWorld 不工作答案

【问题标题】：BackboneJS HelloWorld not workingBackboneJS HelloWorld 不工作
【发布时间】：2016-09-19 08:11:05
【问题描述】：

我尝试运行 BackboneJS HelloWorld 程序，但我得到一个空白页。下面是程序。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>Hello World in Backbone.js</title>
</head>
<body>
<script src="JS/backbone.localStorage-min.js"></script>
<script src="JS/backbone-min.js"></script>
<script src="JS/jquery.min.js"></script>
<script src="JS/underscore-min.js"></script>

 <script type="text/javascript">
  var AppView = Backbone.View.extend({
    el: '#container',
    initialize: function () {
        this.render();
    },
    render: function () {
        this.$el.html("Hello World");
    }
});

 var appView = new AppView();
 </script>

 </body>
 </html>

注意：在本地下载了所有必需的库。

链接：http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/

【问题讨论】：

打开开发工具并检查控制台中可能出现的错误 :)
在此处添加控制台日志
更改顺序或者你的<script>标签，它需要是=> jquery, backbone.min, backbone.localStorage-min.js，最后是underscore.min.js
在<script> impots 下面使用真实代码时，@DavidR 重要吗？
@Andurit 是的，我遇到过类似的问题，此外在backbone.min.js 之前包含backbone.localstorage 脚本对我来说没有多大意义。

标签： javascript jquery html backbone.js

【解决方案1】：

在包含 Backbone 库之前，您需要包含 Underscore 库。请重新排列下面给出的<script> 包含项。

<script src="JS/jquery.min.js"></script>
<script src="JS/underscore-min.js"></script>
<script src="JS/backbone-min.js"></script>
<script src="JS/backbone.localStorage-min.js"></script>

您还需要将 html 元素与 id container 一起放置，因为您在 $el 属性中引用它。因此，在您的 <body></body> 标签中包含以下 <div> 标签，

<div id="container"></div>

这是工作小提琴：https://jsfiddle.net/du2b8vfv/

希望这会有所帮助！

【讨论】：

感谢@David 我仍然得到一个空白页，并且在控制台中出现以下错误：hello-backbone-js.html:19 Uncaught TypeError: Cannot read property 'extend' of undefined 我什至不能访问给定的工作小提琴链接。 :(
我可以知道您正在使用哪个版本的Backbone 吗？我在我的 jsfiddle 示例中使用了 version 1.3.2。
我使用 WebStorm 作为 IDE。主干版本为 0.9.2
你能在这里下载版本1.3.2 - https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.2/backbone.js 并替换当前版本（0.9.2）然后检查它是否工作？
好的。删除你现有的主干

【解决方案2】：

你在 render 中改变了 el 的值，但没有在 html 代码中给出 el 的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>

<div id="hh"></div>
<script type="text/javascript">
AppView = Backbone.View.extend({

initialize: function () {

},
render: function () {
    this.$el.html("hello");
    return this;
}
});

var appView = new AppView();

$("#hh").html(appView.render().el);
</script>

</body>
</html>

【讨论】：