EmberJS, How to NOT render the parent View

Question

I have this router:

// app/router.js
Router.map(function() {
  this.route('battles', function(){
    this.route('battle', { path: ':id' }, function(){
      this.route('combats', function() {
        this.route('new');
      });
    });
  });
});

And these templates:

  // app/templates/battles.hbs
  {{#each model as |battle|}}
    {{battle.name}}
  {{/each}}
  {{outlet}}

  // app/templates/battles/battle/combats.hbs
  {{#each model as |combat|}}
    {{combat.date}}
  {{/each}}

  // app/templates/battles/battle/combats/new.hbs
  {{input type="text" value=date}}
  <button {{action "createCombat"}}>Create Combat</button>

So This is what is rendered for each route

  route: /battles
  -> app/templates/battles.hbs

  route: /battles/B2/combats
  -> app/templates/battles.hbs
  -> app/templates/battles/battle/combats.hbs

  route: /battles/B2/combats/new
  -> app/templates/battles.hbs
  -> app/templates/battles/battle/combats.hbs

So for the route /battles/B2/combats/new the template app/templates/battles/battle/combats/new.hbs is not rendered. This has a quick fix:

  // app/templates/battles/battle/combats.hbs
  {{#each model as |combat|}}
    {{combat.date}}
  {{/each}}
  {{outlet}}

But then the route renders this:

  route: /battles/B2/combats/new
  -> app/templates/battles.hbs
  -> app/templates/battles/battle/combats.hbs
  -> app/templates/battles/battle/combats/new.hbs

And I don't want the list of combats to be rendered when I'm rendering the combat/new form. I would like this:

  route: /battles/B2/combats/new
  -> app/templates/battles.hbs
  -> app/templates/battles/battle/combats/new.hbs

How I can create this setup?

score 0 · Answer 1 · answered Dec 21 '15 at 13:21

If you don't want the combats view to be rendered when displaying the 'new' view, you should place them on the same level and not the 'new' route beneath the 'combats' route. The super route is always called for a child route. Alternatively you could set a bool in your combats controller from the 'new' route. This is not very clean though.

EmberJS, How to NOT render the parent View

1 Answers1