Ember.js transition rendering bug or wrong routing

Question

I have been trying to figure out why the DOM elements stay on the page after I'm going to a child route. When I go from artworks/index to artworks/new all the elements stay on the page. If I refresh the browser window the view displays properly and the previous screen's elements disappear.

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')}));
  }
});

I have followed the advice and I created artworks template, artworks/index and artworks/new

<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>

However when I click on the Upload artwork link, it seems the new template's content get inserted above the index template's content. Is it something with the routing or is it Ember.js bug?

You can see the bug in action here.

Answer 1

Apparently the routing was fine and everything and it was a bug caused by unclosed html tags. I just spotted an error message: The metamorph tags, metamorph-6-start and metamorph-6-end, have different parents.

which was caused by a left </ul> instead of a /table that messed up the whole view. Now it works fine.

Answer 2

In artworks/index template, a closing div is present at the first line. That's the reason for the bug.

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

</div>

Remove it and all will work fine.