EmberJS, How to NOT render the parent View

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?