Question

我尝试运行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/

Answer 1

在加入Underscore图书馆之前，您需要加入Backbone图书馆。请重新排列下面给出的<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>

此外，您需要放置带有身份container的html元素，因为您在$el属性中引用了该元素。因此，请在<div>代码中包含以下<body></body>代码，

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

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

希望这有帮助！

Answer 2

您正在更改渲染中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>

BackboneJS HelloWorld无法正常工作

2 个答案: