恢复 ApplicationRoute 上设置的出口中的内容

Question

我有一个应用程序路由将模板渲染到名为 'sidebar' 的插座中，这应该在整个应用程序中可见。我已经建立了一个简单的例子 here.

当我进入其中一条路线（在我的示例中为颜色路线）时，该出口将呈现不同的模板，当您导航到应用程序中的另一条路线时，它应该显示原来的侧边栏。

这不会自动发生，据我所知，这是因为一旦输入 ApplciationRoute，即首次加载应用程序时，就会调用 renderTemplate，直到页面刷新后才会再次调用.这对我来说很有意义，但我不确定如何解决这个问题。

我尝试在 ColorRoute 的 willTransition 操作下再次调用 Route#render 方法，但它不起作用。

...
actions: {
    willTransition: function() {
        this.render('color.sidebar', { 
            into: 'application', 
            outlet: 'sidebar' 
        });
    }
}
...

Answer 1

显然有人写了一个 ember-cli 插件来解决这个问题

请参阅以下 SO 答案 Ember sidebar - returning from "admin" sidebar to "normal"

Answer 2

我刚刚想出了另一个 "workaround" 为此使用组件而不是命名插座。

不要在 application 模板中使用 {{ outlet "sidebar" }}，只需使用 {{ x-sidebar }}

然后，定义x-sidebar组件模板如下：

  <script type="text/x-handlebars" id="components/x-sidebar">
    {{partial sidebar }}
  </script>

所以，现在您新创建的组件需要一个 sidebar 属性来告诉它要显示哪个模板。

当你像这样使用组件时，你可以传递属性：

{{ x-sidebar sidebar=sidebar }}

然后，您可以在路由中使用 activate/deactivate 钩子来在 application 控制器上设置 sidebar 属性，例如：

App.ColorRoute = Ember.Route.extend({
  model: function(params) {
    return params.color;
  },

  activate: function(){
    this.controllerFor('application').set('sidebar', 'color/sidebar');
  },  
  deactivate: function(){
    this.controllerFor('application').set('sidebar', 'sidebar');
  }  

});

工作解决方案here

恢复 ApplicationRoute 上设置的出口中的内容

Restoring content in outlet set on the ApplicationRoute

ember.js