1

編集：うまくいきましたが、間違っているようです。

メインアプリビューの同期イベントにリスナーを追加してから、プレーヤーをレンダリングします。グローバル変数も追加しましたPgaPlayersApp.CurrentPlayer。

私はこれについて間違った方法で進んでいますか？これを行う正しい方法は何ですか？reset: trueリセット イベントを使用してリッスンできない理由はありますか? （うまくいきません）

ルーター:

// js/router.js
var PgaPlayersApp = PgaPlayersApp || {};

var Router = Backbone.Router.extend({
    routes:{
      'player/:id': 'loadPlayer'
    },
    loadPlayer: function(id)
    {
        PgaPlayersApp.CurrentPlayer.set('id', id);
        PgaPlayersApp.CurrentPlayer.fetch();    
    }   
});

PgaPlayersApp.Router = new Router();
Backbone.history.start();

見る：

//js/views/app.js

var PgaPlayersApp = PgaPlayersApp || {};

PgaPlayersApp.AppView = Backbone.View.extend({
    el: '#pga_players_profile_app',
    initialize: function()
    {
        this.listenTo(PgaPlayersApp.Players, 'reset', this.addAll);
        this.listenTo(PgaPlayersApp.CurrentPlayer, 'sync', this.loadPlayer);
        PgaPlayersApp.Players.fetch({reset: true});
    },

    ...

    loadPlayer: function()
    {
        new PgaPlayersApp.PlayerCardView({ model: PgaPlayersApp.CurrentPlayer }).render();
    }

});
4

1 に答える 1

2

Backbone.js は、アプリをどのように構築したいか (またはコントローラー、モデル、ルーターなどの関係) を実際に強制しないライブラリです。

以下は、それを行う多くの方法の1つです。

カップルのハイライト:

  1. ルーターがフェッチ プロセスを開始します。
  2. モデルがフェッチされると、Router はビューにデータをレンダリングするように要求します (ビューがモデルからの変更イベントをリッスンする代わりに)。

ビューはモデルからの変更イベントをリッスンしないため、これは PlayerCardView が「読み取り専用」ビューであることを前提としています。ユースケースによっては、これは望ましくない場合があるため、最終的にはそれをどのように処理したいかによって異なります。

サンプルコードを次に示します。

(function (export) { 
    var App = export.App = {};

    // Stores state/current views of the App
    App.state = {};
    App.state.currentPlayer = null;

    // Model containing the player
    App.PlayerModel = Backbone.Model.extend({});

    // Single Player View (Assuming you have a collection view for list of players)
    App.PlayerCardView = Backbone.View.extend({
        model: App.PlayerModel,
        template: _.template('<%= id %>'),
        render: function(parentEl) {
            // Render player
            this.$el.html(this.template(this.model.toJSON()));

            // Append player view to parent container
            if (parentEl) {
                parentEl.append(this.$el);
            }

            return this;
        }

        // Don't forget to clean up as well!
    });

    // Router
    App.Router = Backbone.Router.extend({
        routes: {
            'player/:id': 'showPlayer'
        },
        showPlayer: function(id) {
            // Unload current player view, if necessary

            // Construct model
            var player = App.state.currentPlayer = new App.Player({
                id: id
            });

            // Pass model to the new player view
            var view = App.state.currentPlayerView = new App.PlayerCardView({
                model: App.state.currentPlayer
            });

            // At this time, you should probably show some loading indicator as you're fetching data from the server

            // Fetch data
            player.fetch({
                success: function() {
                    // This would be called when data has been fetched from the server.

                    // Render player on screen
                    view.render($('#parentContainerId'));
                }
            });
        }
    });

    // Initializes the App
    App.init = function() {
        // Kick off router
        App.state.router = new App.Router();
        export.Backbone.history.start();
    };
})(window);

// Start the app!
window.App.init();

要点: https://gist.github.com/dashk/5770073

于 2013-06-12T20:53:47.817 に答える