jsスクリプトが2回実行されるという問題が発生しました
main.js：
(function($){
Backbone.sync = function(method, model, success, error){
success();
};
var Movie = Backbone.Model.extend({
defaults: {title:"", year:"", plot:"", extended_plot:""}
});
var List = Backbone.Collection.extend({
model: Movie
});
var MovieRow = Backbone.View.extend({
tagName: 'li',
initialize: function(){
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function(){
$(this.el).html('<span>' + this.model.get('title') + '</span>');
}
});
var MovieList = Backbone.View.extend({
el: $('#content'),
initialize: function(){
_.bindAll(this, 'render', 'appendItem', 'addItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);
console.log('initializing');
this.render();
},
render: function(){
console.log('rendering');
$(this.el).append("<ol></ol>");
},
appendItem: function(movieObj){
var movieView = new MovieRow({
model: movieObj
});
console.log('appending');
$('ol', this.el).append(movieView.render().el);
},
addItem: function(titleStr){
var movieObj = new Movie();
movieObj.set({title: titleStr});
this.collection.add(movieObj);
}
});
console.log('main');
var listView = new MovieList(); })(jQuery);
index.php：
<!-- language: lang-html -->
<head>
<meta charset="utf-8">
<title><?php echo "$title: $subtitle"; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/default.css" rel="stylesheet" />
<link href="css/jquery.mobile-1.1.1.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
</head>
<body>
<div data-role="header" id="header"><h1>GREATES MOVIES OF ALL TIMES</h1></div>
<div data-role="content" id="content">
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
出力：
main --------------- main.js（64行目）
初期化-------main.js（37行目）
レンダリング----------main.js（42行目）
GET http：// * /main.js?_=1348774790150---200 OK --- jquery.js（行8281）
main -------------- jquery.js（627行目）
初期化------jquery.js（600行目）
レンダリング---------jquery.js（605行目）