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該弄亂整個視圖引起的。現在它工作正常。