Ember.js转换渲染错误或路由错误

我一直在试图弄清楚为什么在转到子路由后DOM元素会留在页面上。当我从artments/index转到artments/new时，所有元素都会停留在页面上。如果刷新浏览器窗口，视图将正确显示，并且上一个屏幕的元素将消失。

App.Router.map(function() {
  this.resource('artworks', function() {
    this.route('new');
  });
  this.resource('artwork', { path:'/artworks/:artwork_id' });
  this.resource('critique', {path: '/critiques/:critique_id'});
  this.resource('doc', {path: '/docs/:doc_id'});
});
App.IndexRoute = Ember.Route.extend({
  redirect: function () {
    this.transitionTo('artworks');
  }
});
App.ArtworksRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('artwork');
  }
});
App.ArtworkRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('artwork', params.artwork_id);
  },
  setupController: function(controller, model) {
    controller.set('content', model);
    controller.set('doc', this.store.find('doc', model.get('doc-key')));
    controller.set('critique', this.store.find('critique', {'artwork-key': model.get('id')}));
  }
});

我遵循了建议，创建了艺术品模板、艺术品/索引和艺术品/新

<script type="text/x-handlebars">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <a class="navbar-brand" href="#">{{App.applicationName}}</a>
        <ul class="nav navbar-nav">
            <li>{{#link-to 'artworks.new'}}Upload artwork{{/link-to}}</li>
        </ul>
        <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">The User</a></p>
    </div>
  </nav>
     {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="artworks">
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="artworks/index">
  <div class="container-fluid carousel-wrap">
    {{partial 'carousel'}}
  </div>
  <div class="container">
    <div class="row">
     <div class="col-md-12">
      <div class="jumbotron">
          <h1>Welcome to Vonalasfüzet!</h1>
          <p>Our goal is to help aspiring writers to reach their goals.</p>
          <p><a class="btn btn-primary btn-lg" role="button">Get to know more</a></p>
      </div>
      <div class="col-md-10">
       <table class="table table-striped">
         <thead>
             <tr>
             <th>Title</th>
             <th>Genre</th>
             <th>Revision</th>
             <th>Word count</th>
             <th>Operations</th>
             </tr>
         </thead>
            {{#each}}
                <tr>
                <td>{{title}}</td>
                <td>{{genre}}</td>
                <td>{{revision}}</td>
                <td>{{word-count}}</td>
                <td>{{#link-to 'artwork' id}}View{{/link-to}}</td>
                </tr>
            {{/each}}
          </ul>
      </div>
     </div>
    </div>
    </div>
  </script>
  <script type="text/x-handlebars" data-template-name="artworks/new">
  <div class="container">
   <div class="row">
    <div class="col-md-12">
          <form role="form">
              <div class="form-group">
                  {{input type="text" class="new-artwork form-control" placeholder="New Title" value=newTitle}}
              </div>
              <div class="form-group">
                  {{input type="text" class="new-artwork form-control" placeholder="New Genre" value=newGenre}}
              </div>
              <div class="form-group">
                  {{view App.TinymceView valueBinding="newBody"}}
              </div>
              <div class="form-group">
                  <button {{action 'save'}} class="btn btn-default new-doc-button" {{bind-attr disabled=disabled}}>Add</button>
              </div>
          </form>
          <li class="list-group-item">{{#link-to 'artworks'}}Back{{/link-to}}</li>
      </div>
     </div>
    </div>
  </script>

然而，当我点击上传图片链接时，新模板的内容似乎插入了索引模板的内容之上。是路由问题还是Ember.js错误？

你可以在这里看到bug的作用。