Question

编辑：搞定了，但似乎错了。

我最终在主应用视图上为同步事件添加了一个监听器，然后渲染一个播放器。我还添加了一个全局变量PgaPlayersApp.CurrentPlayer。

我是以错误的方式来做这件事的吗？这样做的正确方法是什么？有没有理由我不能使用reset: true然后监听重置事件？（它不起作用）

ROUTER：

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

});

Answer 1

Backbone.js是一个库，它并没有真正强制你如何构建你的应用程序（或者你的控制器，模型，路由器等之间的关系）。

以下是其中一种方法。

夫妇亮点：

路由器启动了获取过程。
当获取模型时，路由器会要求View呈现数据（而不是让View从模型中侦听更改事件。）

这假设PlayerCardView是一个“只读”视图，因为View不会从模型中侦听更改事件。根据您的使用情况，这可能不太理想，因此最终取决于您希望如何处理它。

以下是一些示例代码：

(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

骨干路由器 - 加载数据

1 个答案: