1

我正在尝试测试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();

任何想法?谢谢

4

3 回答 3

4

您可能正在使用过时版本的下划线库,请更新它以解决问题。如果您仍然遇到任何其他问题,请更新到最新版本的主干.js

于 2013-10-28T13:50:51.940 回答
0

I had the same issue and I resolved it by rearranging the order of js files to load in script tag. Make sure that jquery.js file is loaded before backbone.js file. This has resolved my issue.

于 2015-04-22T04:10:14.387 回答
0

我同意这个问题很可能是由某些库(主干、下划线或 jQuery)过时引起的。要解决,请更新到最新版本,以下对我有用..

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
于 2016-03-01T15:10:06.497 回答