ember.js - 当转换到另一条路由到命名导出时如何保留另一个导出

Question

我有这样的路线，

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

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

并且board模板有两个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 时，它们的模板将显示在默认 socket 中，我想将卡片模板显示到名为“detail”的 socket 中。

我有一个问题。根据Ember的一般工作方式，当我移动到卡片路线时，卡片模板将进入详细导出，但其他默认导出将变为空。我想保留默认 socket ，就像我移动到卡路线时一样。

我的第一个方法是使用一个 Controller 来存储默认 socket 中的信息，并在我移动到卡路线时再次渲染它们。

针对这种情况有什么最佳实践吗？

Answer 1

我个人从未在 Ember 中使用过查询参数(它们仍处于实验阶段并且可在 Canary 版本中使用)，但我相信它们非常适合您。

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 路由的子路由。

希望这对您有帮助!