我有这段 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Backbone.js Demos</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="app.js"></script>
<script type="x-tmpl" id="list_tmpl">
<span><%= part1 %><%= part2 %></span>
<a href="#swappy" class='swap'>[SWAP]</a>
<span> </span>
<a href="#del" class='remove'>[DELETE]</a>
</body>
</html>
当脚本标签在body标签之间时，我的脚本可以正常工作。但是，如果我将所有脚本标签移至head，它们将停止工作。我很困惑为什么。这种行为有什么原因吗？谢谢大家的时间和帮助！
编辑：应用程序
(function($){
Backbone.sync = function (method, model, success, error){
success();
};
var Item = Backbone.Model.extend({
defaults: {
part1: 'Hello',
part2: 'World'
}
});
var ItemList = Backbone.Collection.extend({
model: Item
});
var ItemView = Backbone.View.extend({
tagName: 'li',
events: {
'click .swap': 'swap',
'click .remove': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove');
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).html(_.template($('#list_tmpl').html(), this.model.toJSON()));
return this;
},
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
}
});
var AppView = Backbone.View.extend({
el: $('body'),
events: {
'click #add': 'addItem'
},
initialize: function (){
this.counter = 0;
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new ItemList();
this.collection.bind('add', this.appendItem);
this.render();
},
render: function(){
$(this.el).append("<button id='add'>Add Item</button>");
$(this.el).append("<ul id='todoList'/>");
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('#todoList', this.el).append(itemView.render().el);
}
});
var Tasker = new AppView();
})(jQuery);