Routing not rendering to intended area

I have an outlet in the max view which render in some outlet then i go to min view and the previous rendered outlets are not removed

by lcoq

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    App
    <div>{{outlet}}</div>
    <div>DetailsList: {{outlet "detailsList"}}</div>
    <div>DetailsMatrix: {{outlet "detailsMatrix"}}</div>
    <div>Nothing should be appended after this div</div>
</script>
    <script type="text/x-handlebars" data-template-name="index">        
       Index Template
        {{#linkTo "details"}}go to Details{{/linkTo}}
        <hr/>
        <h4>HOME</h4>
    </script>
   
    <script type="text/x-handlebars" data-template-name="details">
        Details Template   {{#linkTo "index"}}go to index{{/linkTo}}
        {{#linkTo "index"}}Home{{/linkTo}}
        <hr/>
        <h4>DETAILS</h4>
        <hr/>
        <div class='outletArea'>
        {{outlet "detailsList"}}
        </div>
        <hr/>
        <div class='outletArea'>
        {{outlet "detailsMatrix"}}
        </div>
    </script>    
    <script type="text/x-handlebars" data-template-name="detailsList">    
        <hr/>
        <h4>Details LISTING</h4>
    </script>
    <script type="text/x-handlebars" data-template-name="detailsMatrix">  
        <hr/>
        <h4>Details MATRIX</h4>
    </script>

CSS

.outletArea
{
    border: solid thin green;
    background: gray;
    height: 30px;
        
}

JavaScript

var App = Ember.Application.create();


Ember.LOG_BINDINGS = true; ;



App.Router.map(function () {
    this.route("index", { path: "/" });
    
    this.route("details", { path: "/details" });
    
    
});

App.DetailsRoute = Ember.Route.extend({
    renderTemplate: function () {
        this._super();//to render the hotel temlate whch has outlets
        debugger;
        this.render('detailsList', { outlet: 'detailsList' });//render the list in list outlet
        this.render('detailsMatrix', { outlet: 'detailsMatrix'});//rendet the matrix in matrix outlet
    }
});