CODEWITHSUNDEEP
ember.js
Josh
Josh

Reputation: 1804

Restoring content in outlet set on the ApplicationRoute

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.

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.

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

Upvotes: 0

Views: 79

Answers (2)

Kalman
Kalman

Reputation: 8121

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

Instead of {{ outlet "sidebar" }} in your application template just use {{ 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 }}

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

});

Working solution here

Upvotes: 1

Kalman
Kalman

Reputation: 8121

Someone apparently wrote an ember-cli addon to address this

See the following SO answer Ember sidebar - returning from "admin" sidebar to "normal"

Upvotes: 1

Related Questions