0

我正在学习一些 JavaScript 书籍，使用 Node.js/Express/Jade/Backbone.js 并尝试使用一个简单的 Web 应用程序来跟踪扑克锦标赛，以提高我的新手 JS 技能，学习前面提到的技术，同时制作一个不错的扑克应用程序。这是我到目前为止的代码，首先使用网络上的各种资源和 PeepCodes Backbone.js Screencast（我将 node.js 设置为后端 api）：

(function ($) {
    window.Tournament = Backbone.Model.extend({});

    window.Tournaments = Backbone.Collection.extend({
        model: Tournament,
        url: '/tournaments'
    });

    window.tournaments = new Tournaments();

    // I removed this line once I attempted to bootstrap the data.
    window.tournaments.fetch(); 

    window.TournamentView = Backbone.View.extend({
        tagName: 'tr',
        className: 'tournaments',

        initialize: function () {
            _.bindAll(this, 'render');
            this.model.bind('change', this.render);
            this.template = _.template($("#tournament-template").html());
        },
        render: function () {
            var renderedContent = this.template(this.model.toJSON());
            $(this.el).html(renderedContent);
            return this;
        }
    });

    window.TournamentsView = Backbone.View.extend({
        initialize: function () {
            _.bindAll(this, 'render');
            this.collection.bind('reset', this.render);
        },
        render: function () {
            $(this.el).html($("#tournaments-template").html());
            (this.collection).each(function(tournament) {
                var view = new TournamentView({
                    model: tournament,
                    collection: this.collection
                });
                $("#tournaments").append(view.render().el);
            });
            return this;
        }
    });

    window.BackboneTournaments = Backbone.Router.extend({
        routes: {
            '': 'tournaments'
        },
        initialize: function () {
            this.tournamentsView = new TournamentsView({
                collection: window.tournaments
            });
        },
        tournaments: function () {
            $("#container").empty();
            $("#container").append(this.tournamentsView.render().el);
        }
    });

    $(function() {
        window.App = new BackboneTournaments();
        Backbone.history.start({});
    });

})(jQuery);

这完美地工作。我有一个页面，上面有一张扑克锦标赛的填充表。但是在我尝试引导数据以使其在页面加载后不获取它（并在几分之一秒内显示一个未填充的表）之后，它不再起作用。我将以下代码放在应用程序的一页（app.jade，一个 Jade 模板）的正文中，紧跟在 Backbone.js 使用的容器 (#container) 之后，还删除了 windows.tournaments.fetch( ); 从上面的代码行。

script(type="text/javascript")
    tournaments.reset(!{JSON.stringify(tournies)});

tournies 对象从渲染它的 Node.js 路由传递到 Jade 模板 (app.jade)。使用 Firebug，我可以看到 reset() 函数成功地以 JSON 格式获取数据，并且表正在由 Backbone 创建......但它没有被填充。任何帮助将不胜感激，因为我完全不知道问题是什么。另外，如果我在问题的结构中犯了任何错误，我深表歉意，因为我以前没有在这里发布过。如果我有，请随时告诉我。

4

1 回答 1

2

我的第一个猜测是，执行脚本时文档还没有准备好，试试这个：

 $(document).ready(function(){
   tournaments.reset(!{JSON.stringify(tournies)});
 });

我的第二个是您需要查看 JSON 数据。尝试去控制台，手动将一些锦标赛添加到集合中，看看结果是什么，也许解析时出现了某种错误。

A side note on your code, to organize your code better you should use the module pattern and name things with a schema like this: http://ricostacruz.com/backbone-patterns/#namespace_convention

于 2012-04-24T06:22:24.927 回答