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

Question

我一直在试图弄清楚为什么DOM元素在我去儿童路线后留在页面上。当我从艺术品/索引到艺术品/新品时，所有元素都留在页面上。如果我刷新浏览器窗口，则视图正确显示，并且前一个屏幕的元素消失。

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错误？

您可以看到行动here中的错误。

Answer 1

在artworks/index模板中，第一行显示一个结束div。这就是错误的原因。

<script type="text/x-handlebars" data-template-name="artworks/index"> 

</div> 

删除它，一切都会正常工作。

Answer 2

显然，路由很好，一切都是由未关闭的html标记引起的错误。 我刚发现的错误消息： The metamorph tags, metamorph-6-start and metamorph-6-end, have different parents.

其通过左</ul>代替/table该弄乱整个视图引起的。现在它工作正常。