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

并且电路板模板有两个插座，一个是默认插座，另一个是插座。

/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的工作原理，当我移动到卡片路径时，卡片模板将进入详细插座，但另一个默认插座将变空。我想保留默认插座，就像我移动到卡路线时那样。

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

有关这种情况的最佳做法吗？

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

我希望这可以帮到你！

如何在转换到另一条路径进入命名插座时保留另一个插座

1 个答案: