ember.js中的多个动态段

Question

我目前的路线定义如下:

App.Router.map(function() {
    this.resource('players', { path: ':page_id' }, function() {
        this.resource('player', { path: ':player_id' });
    });
});

我的想法是左边有一个玩家名单.显示的播放器名称取决于page_id.在右侧,我根据player_id显示单个玩家及其所有信息.问题是,两者都是独立的,意味着我可以在第三个玩家页面,同时显示列表中的第一个玩家,或根本没有玩家.

我一直在尝试做的是这样的事情,这是PlayersController中的一个方法,当我点击进入下一个播放器页面时被调用:

doTransition: function() {
    var players = App.Player.findAllForPage(this.playersPerPage, this.currentOffset);
    players.reopen({
        id: this.currentOffset
    });
    var playerController = this.get('controllers.player');
    var currentPlayer = playerController.getWithDefault('content');
    if (currentPlayer) {
        this.transitionToRoute('player', players, currentPlayer);
    } else {
        this.transitionToRoute('players', players);
    }    
}

我正在尝试做的事情:当我点击进入下一个玩家页面时,如果当前没有玩家显示,则转换到PlayersRoute,否则转换到PlayerRoute,以便在转换完成后仍然显示玩家.

问题:有时currentPlayer变量并不总是为null,即使当前没有显示任何播放器.有没有办法解决这个问题,也许是从某个地方获取当前路线？

Answer 1

鉴于你说这两个部分(基于玩家的列表page_id,以及基于玩家的信息player_id)是完全独立的,在我看来你似乎不会嵌套路线,而是有两个命名的出口(称之为left和right,或者page和player,等等,你有选择地渲染.

路由器:

App.Router.map(function() {
    this.resource('page', { path: ':page_id' });
    this.resource('player', { path: ':player_id' });
 });

application.hbs:

{{outlet page}}
{{outlet player}}

然后你就可以覆盖你renderTemplate为你page和player路线呈现到合适的模板.为了澄清,page路线会显示你当前拥有的玩家路线(它取决于page_id,但页面有很多玩家,所以路线根据页面显示玩家),player路线会根据玩家信息显示玩家信息.player_id.

(作为一个方面说明,我不认为你可以嵌套的资源,你现在把做正确的方式resource player下resource players-我觉得只有路线可以被嵌套)

编辑:使用具有多个动态段的单一路径

我认为你的建议可行.从链接的示例来看,似乎您需要创建"父"资源(不是嵌套路由,但是具有更多通用路径,例如/ page /和/ page /:page_id/player /:player_id).然后,您可以通过model适当的路径单独设置模型,并serialize为双动态段路径提供一个钩子:

serialize: function(model) {
    return {
        page_id : this.modelFor('page').get('id') 
        player_id : this.modelFor('player').get('id')
    };
}

请注意,我们不依赖于model传入的对象,因为您已经说过页面和播放器面板可以完全独立,因此我们使用它modelFor.

我认为你也可以处理关于默认页面的逻辑,如果没有通过redirect钩子建议渲染/默认播放器.

最后,您将renderTemplate在PagePlayer路由中覆盖以实际执行渲染:

renderTemplate: function(model, controller) {
  this.render("page", { into: "page" });
  this.render("player", { into: "player"});
}

我认为你必须小心不要在更一般的路线中渲染模板,因为如果你从/ page/1/player/2移动到/ page/1/player/3,页面路线不会重新输入.