恢复ApplicationRoute上插座中的内容 [英] Restoring content in outlet set on the ApplicationRoute

问题描述

我有一个应用程序路线，将模板渲染到名为sidebar的插座中，这应该可以在整个应用程序中查看。我已经设置了一个快速的例子 here 。

I have an application route that is rendering a template into an outlet named 'sidebar', this should be viewable across the whole of the app. I have set up a quick example here.

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

When I go into one of the routes (in my example, the color route) this outlet will render a different template and when you navigate to another route in the app it should show the sidebar that was there originally.

这不会自动发生，我明白是因为一旦 ApplciationRoute 已经输入的是当应用程序首次加载时， renderTemplate 被调用，直到页面刷新才被再次调用。这是对我有意义的，但我不确定如何解决这个问题。

This doesn't happen automatically and I understand it is because once the ApplciationRoute has been entered which is when the app is first loaded the renderTemplate is called and not called again until page refresh. This makes sense to me, but I'm unsure how to get around this.

我尝试重新调用 Route＃render 方法再次在 willTransition 操作 ColorRoute 但它不起作用。

I have tried re-calling the Route#render method again under the willTransition action of the ColorRoute but it doesn't work.

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

推荐答案

我刚刚提出了使用组件而不是命名插座的另一个解决方法。

I just came up with another "workaround" for this using a component instead of a named outlet.

而不是应用程序 {{outletsidebar}} c $ c>模板只需使用 {{x-sidebar}}

Instead of {{ outlet "sidebar" }} in your application template just use {{ x-sidebar }}

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

Then, define the x-sidebar component template as follows:

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

所以，现在你新创建的组件正在期待一个侧边栏属性来告诉它要显示哪个模板。

So, now your newly created component is expecting a sidebar property to tell it which template to display.

当您使用组件时，您可以传递该属性：

You can pass that property when you use the component like so:

{{ x-sidebar sidebar=sidebar }}

然后，您可以使用路由中的激活/停用钩子来设置侧边栏属性c $ c> application controller，例如：

Then, you can use activate/deactivate hooks in your routes to set the sidebar property on the application controller, for example:

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

});

工作解决方案这里

这篇关于恢复ApplicationRoute上插座中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！