Destroy/remove a meteor template in iron-router - meteor

Question

I've just started using iron router in meteor. How do I hide or delete a template, or replace it with another?
I have two client-side routes. One shows a list of chatrooms a user can join:
Router.route('/', function () {
this.layout('bodyLayout');
this.render('roomList', {
to: 'roomList'
});
});
The other is for the chatrooms:
Router.route('/room/:_id', function () {
this.layout('bodyLayout');
var roomId = this.params._id;
this.render('room', {
to: 'room',
data: () => {
return { roomId }
}
});
});
Both of these have the same layout where they are yielded close together:
<template name="bodyLayout">
<!-- layout stuff -->
{{> yield 'roomList'}}
{{> yield 'room'}}
<!-- layout stuff -->
</template>
Now, if I go to / and click a room, the room renders under it. But what I really want is for this to show either room OR roomList. How do I delete roomList when creating room, or can I replace it with room somehow?

Answer 1

So ultimately I've found several solutions.
Replacing a template
This is useful in a case like mine, if a certain location needs only one of several templates. It turns out that several routes can render to the same yield. we can remove one of the yields:
<template name="bodyLayout">
<!-- layout stuff -->
{{> yield }}
<!-- layout stuff -->
</template>
And remove the to attribute from the object we pass to this.render:
Router.route('/', function () {
this.layout('bodyLayout');
this.render('roomList');
});
Router.route('/room/:_id', function () {
this.layout('bodyLayout');
var roomId = this.params._id;
this.render('room', {
// We don't need this anymore:
// to: 'room',
data: () => {
return { roomId }
}
});
});
Alternatively, do give the yield a name:
<template name="bodyLayout">
<!-- layout stuff -->
{{> yield 'content' }}
<!-- layout stuff -->
</template>
And give both routers the 'to' attribute that refers to the same yield:
Router.route('/', function () {
this.layout('bodyLayout');
this.render('roomList', { to: 'content'});
});
Router.route('/room/:_id', function () {
this.layout('bodyLayout');
var roomId = this.params._id;
this.render('room', {
to: 'content',
data: () => {
return { roomId }
}
});
});
Removing a template from a router
If you do need to remove a template from a router, you can do this by giving the this.render function an empty string instead of a template name, thus telling it to render no template to this yield:
Router.route('/', function () {
this.layout('bodyLayout');
this.render('roomList', {
to: 'roomList'
});
// Remove the room that was shown
this.render('', { to: 'room'});
});