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. 路由器启动获取过程。
  2. 获取模型后，路由器然后要求视图呈现数据（而不是让视图监听来自模型的更改事件。）

这假定 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 回答