如何在转换到另一个路由到命名插座时保留另一个插座答案

【问题标题】：how to keep the other outlet when transitioning to another route into named-outlet如何在转换到另一个路由到命名插座时保留另一个插座
【发布时间】：2014-02-09 16:43:08
【问题描述】：

我有这样的路线，

Router.map(function() {
  this.resource('board', { path: '/boards/:board_id' }, function() {
    this.route('calendar');
    this.route('attachments');

    this.resource('card', { path: '/cards/:card_id' });
  });
});

而板子模板有两个outlet，一个是默认的，一个是命名为outlet的。

/templates/board.hbs

<div id="master-content">
  {{outlet}}
</div>
<div id="detail-content">
  {{outlet 'detail'}}
</div>

/routes/card.js

App.Card = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.render('card', { outlet: 'detail', controller: controller, into: 'board' });
  }
});

当我转换到 board.index 或 board.calendar 或 board.attachments 时，它们的模板将显示在默认插座中，我想将卡片模板显示在名为“detail”的插座中。

我有一个问题。根据 Ember 的一般工作方式，当我移动到卡片路由时，卡片模板将成为详细插座，但其他默认插座将变为空。我想保留我移动到卡片路由时的默认插座。

我的第一种方法是使用一个控制器来存储默认插座中的信息，并在我移动到卡片路由时再次渲染它们。

关于这种情况的任何最佳做法？

【问题讨论】：

标签： ember.js

【解决方案1】：

我个人从未在 Ember 中使用过查询参数（它们仍处于试验阶段，可用于金丝雀版本），但我相信它们非常适合您。

http://emberjs.com/guides/routing/query-params/

您可以使用路由中的完整转换 (here) 来根据查询参数中的值呈现模板。

App.CardRoute = Ember.Route.extend({

    model: function(params) {
        this.set('calendar', params.calendar); //assuming calendar it's the name of your query param
        this.set('attachements', params.attachements); //assuming calendar it's the name of your query param
    },

    renderTemplate: function(controller, model) {
        this.render('card', { outlet: 'detail', controller: controller, into: 'board' });
        if (this.get('calendar')) {
            this.render('calendar', { controller: 'calendar', into: 'board' });
        } else if (this.get('attachements')) {
            this.render('attachements', { controller: 'attachements', into: 'board' });
        }
    },

    actions: {
      queryParamsDidChange: function() {
        // This is how we opt-in to
        // a full-on transition that'll
        // refire the `model` hook and 
        // give us a chance to reload data
        // from the server.
        this.refresh();
      }
    }
});

您的另一个选择是将card 资源作为calendar 和attachments 路由的子路由。

希望对你有帮助！

【讨论】：