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 的玩家信息）是完全独立的，在我看来似乎你不会嵌套路线，而是有两个命名的网点（称为 left 和 right 或页面和播放器等），您可以选择性地渲染。

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}}

然后，您可以为页面和播放器 renderTemplate $ c>将渲染到适当模板中的路由。要澄清，页面路线将显示您当前拥有的玩家路线（它取决于page_id，但该网页有很多玩家，所以路线显示玩家基于该页面）和播放器路线将根据 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.

（作为一个附注，我不认为你可以按照你现在的方式嵌套资源，把资源播放器放在资源播放器 - 我认为只有路由可以嵌套。）

(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.)

编辑：使用单个路由与多个动态段

我认为您的建议可以正常工作。从链接的示例，您似乎需要创建父资源（不是嵌套的路由，而是无论如何，具有更多的一般路径，如/ page /和/ page /：page_id / player /：player_id）。然后，您可以通过相应路线中的模型单独设置您的模型，并提供一个序列化钩子双动态段路由：

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')
    };
}

请注意，我们不依赖于 / code>对象传入，因为您已经说过页面和播放器面板可以完全独立，所以我们使用 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屋！