我正在尝试测试backbone.js,但是,我遇到了TypeError : h.has is not a function
错误。我的 HTML 代码:
<html>
<head>
<title></title>
</head>
<body>
<h1>My Theater</h1>
<div id="mainContainer"></div>
<input type="text" value="Enter HashTag" id="hashtag" />
<script type="text/template" id="tmplt-Tweets">
<ul>
</ul>
</script>
<script type="text/template" id="tmplt-Tweet">
<div>*******************************************************</div>
<div><%= url %> </div>
<div><%= text %> </div>
<div><%= html %> </div>
<div><%= date %> </div>
<div><%= id %> </div>
<div><%= img %> </div>
<div><%= name %> </div>
<div><%= rt %> </div>
</script>
<script src="scripts/libs/jquery-1.7.1.js" type="text/javascript"></script>
<script src="scripts/libs/underscore.js" type="text/javascript"></script>
<script src="scripts/libs/backbone-min.js" type="text/javascript"></script>
<script src="scripts/main.js" type="text/javascript"></script>
</body>
</html>
骨干代码:
/// <reference path="../../scripts/libs/jquery-1.7.1.js" />
/// <reference path="../../scripts/libs/underscore.js" />
/// <reference path="../../scripts/libs/backbone-min.js" />
var Tweet = {
Models: {},
Collections: {},
Views: {},
Templates:{}
}
Tweet.Models.Movie = Backbone.Model.extend({})
Tweet.Collections.Movies = Backbone.Collection.extend({
model: Tweet.Models.Movie,
initialize: function(){
console.log("No Tweets Yet")
}
});
Tweet.Templates.movies = _.template($("#tmplt-Tweets").html())
Tweet.Views.Movies = Backbone.View.extend({
el: $("#mainContainer"),
template: Tweet.Templates.movies,
//collection: new Theater.Collections.Movies(), //Not needed
initialize: function () {
//_.bindAll(this, "render", "addOne", "addAll");
this.collection.bind("reset", this.render, this);
this.collection.bind("add", this.addOne, this);
},
render: function () {
console.log("render")
console.log(this.collection.length);
$(this.el).html(this.template());
this.addAll();
},
addAll: function () {
console.log("addAll")
this.collection.each(this.addOne);
},
addOne: function (model) {
console.log("addOne")
view = new Tweet.Views.Movie({ model: model });
$("ul", this.el).append(view.render());
}
})
Tweet.Templates.movie = _.template($("#tmplt-Tweet").html())
Tweet.Views.Movie = Backbone.View.extend({
tagName: "li",
template: Tweet.Templates.movie,
//events: { "click .delete": "test" },
initialize: function () {
//_.bindAll(this, 'render', 'test');
this.model.bind('destroy', this.destroyItem, this);
this.model.bind('remove', this.removeItem, this);
},
render: function () {
return $(this.el).append(this.template(this.model.toJSON())) ;
},
removeItem: function (model) {
console.log("Remove - " + model.get("Name"))
this.remove();
}
})
Tweet.Router = Backbone.Router.extend({
routes: {
"": "http://localhost/assignment/index.php" //http://localhost:22257/Theater/theater.htm
},
defaultRoute: function () {
console.log("defaultRoute");
Tweet.movies = new Tweet.Collections.Movies()
new Tweet.Views.Movies({ collection: Tweet.movies }); //Add this line
Tweet.movies.fetch();
console.log(Tweet.movies.length)
}
})
var appRouter = new Tweet.Router();
Backbone.history.start();
任何想法?谢谢