ember.js 中的多个动态段 [英] Multiple dynamic segments in ember.js

问题描述

我目前的路线定义如下:

I currently have my routes defined like this:

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

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

The idea is that I have a list of player names on the left. The player names displayed depend on the page_id. On the right, I display a single player and all its information based on the player_id. The thing is, both are independent, meaning that I could be on the third player page, while displaying the first player in the list, or no player at all.

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

What I keep trying to do is something like this, which is a method in the PlayersController that gets called when I click to go to the next player page:

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 以便转换完成后，播放器仍会显示.

What I'm trying to do: When I click to go to the next player page, transition to the PlayersRoute if there is no player currently being displayed, otherwise transition to the PlayerRoute so that the player is still displayed when the transitioning is done.

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

The problem: sometimes the currentPlayer variable is not always null, even if no player is currently being displayed. Is there a way to get around this, perhaps by getting the current route from somewhere?

推荐答案

鉴于你说的两个部分(基于page_id的玩家列表，以及基于player_id的玩家信息code>) 是完全独立的，在我看来，你不会嵌套路由，而是有两个命名的出口(称它们为 left 和 right，或 page 和 player 等)，您有选择地渲染到其中.

Given that you say the two sections (list of players based on page_id, and player information based on player_id) are completely independent, it seems to me like you wouldn't nest the routes, and instead, have two named outlets (call them left and right, or page and player, etc) that you selectively render into.

路由器:

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

application.hbs:

application.hbs:

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

然后你可以为你的 page 和 player 路由覆盖你的 renderTemplate 以渲染到适当的模板中.为了澄清，page 路由将显示您当前拥有的作为玩家路由的内容(它取决于 page_id，但页面有很多玩家，因此该路由基于页面显示玩家)，并且 player 路由会根据player_id 显示玩家信息.

And then you can override your renderTemplate for your page and player routes to render into the appropriate template. To clarify, page route would display what you currently have as the players route (it's dependant on the page_id, but the page has many players, so the route displays the players based on the page), and player route would display the player information based on the player_id.

(作为旁注，我不认为您可以像现在这样将 resource player 放在 resource player 下嵌套资源——我认为只有路由可以嵌套.)

(As a side note, I don't think you can nest resources the way you do right now with putting resource player under resource players -- I think only routes can be nested.)

使用具有多个动态段的单一路线

我认为您的建议可行.从 linked example 看来您需要创建父"资源(不是嵌套路由，而是无论如何都有更通用的路径，例如/page/和/page/:page_id/player/:player_id).然后，您可以通过相应路由中的 model 单独设置模型，并为双动态段路由提供一个 serialize 钩子:

I think your suggestion could work. From the linked example it seems like you need to create the "parent" resources (not nested routes, but having more general paths, like /page/ and /page/:page_id/player/:player_id) anyway. You can then set up your models individually via the model in the appropriate route, and just provide a serialize hook for the double dynamic segment route:

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

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

Note we're not relying on the model object passed in because you've said that the page and player panels can be completely independent, so we use modelFor instead.

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

I think you can also handle your logic about default page to render / default player to render if none are suggested here via the redirect hook.

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

Finally, you would override renderTemplate in your PagePlayer route to actually do the rendering:

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

我认为你必须小心不要在更通用的路由中渲染模板，因为如果你从/page/1/player/2 移动到/page/1/player/3，页面路由不是重新输入.

I think you have to be careful to NOT render the templates in the more general routes because if you if you move from /page/1/player/2 to /page/1/player/3, the page route is NOT re-entered.

这篇关于ember.js 中的多个动态段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！