0

私はいくつかの JavaScript の本を勉強し、Node.js/Express/Jade/Backbone.js をいじり、単純な Web アプリを試してポーカー トーナメントを追跡し、初心者の JS スキルを向上させ、前述のテクノロジーを学びます。 、同時にまともなポーカー アプリを作成します。これは私がこれまでに持っているコードで、Web のさまざまなソースと PeepCodes の最初の Backbone.js スクリーンキャストを使用しています (バックエンド API として node.js をセットアップしています)。

(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);

これは完全に機能します。ポーカー トーナメントのテーブルが設定されたページがあります。しかし、ページの読み込み後にデータを取得しないようにデータをブートストラップしようとすると (そして、データが取り込まれていないテーブルが一瞬表示されます)、機能しなくなります。Backbone.js で使用されるコンテナー (#container) の直後に、アプリの 1 つのページ (app.jade、Jade テンプレート) の本文に次のコードを配置し、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)});
 });

2つ目は、JSONデータを確認する必要があるということです。コンソールに移動して、トーナメントのいくつかを手作業でコレクションに追加し、結果がどうなるかを確認してみてください。解析に何らかのエラーがある可能性があります。

コードに関する補足事項として、コードをより適切に整理するには、モジュールパターンを使用し、次のようなスキーマで名前を付ける必要があります。http: //ricostacruz.com/backbone-patterns/#namespace_convention

于 2012-04-24T06:22:24.927 に答える