Emberjs templates not being removed when going to new route

Question

I'm trying to learn and use Ember but have come against something I can't figure out.

I have some nested routes, and when navigating to the subroutes, it doesn't remove the old template from the outlet, but rather prepends the new template to it., nothing I've tried will stop it from doing this though. Even removing the nesting of the routes.

Here's my code with unnested routes

Ember.TEMPLATES["application"] = Ember.Handlebars.compile('<!-- Fixed navbar --><div class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="#">Workout tracker {{title}}</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li></ul><ul class="nav navbar-nav navbar-right"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a><ul class="dropdown-menu"><li>{{#link-to \'userIndex\'}}Users{{/link-to}}</li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href="#">Separated link</a></li><li><a href="#">One more separated link</a></li></ul></li></ul></div><!--/.nav-collapse --></div></div><div class="container outlet">{{outlet}}</div> <!-- /container -->');

Ember.TEMPLATES["userEdit"] = Ember.Handlebars.compile('<form role="form"><div class="form-group"><label {{bindAttr for="view.nameField.elementId" }}>Name</label>{{view Ember.TextField valueBinding="name" class="form-control" viewName="nameField"}}</div><div class="form-group"><label {{bindAttr for="view.lastnameField.elementId" }}>Last Name</label>{{view Ember.TextField valueBinding="lastname" class="form-control" viewName="lastnameField"}}</div></form>');

Ember.TEMPLATES["userIndex"] = Ember.Handlebars.compile("<table class=\"table table-striped table-bordered table-hover\"><thead><th>Name</th><th>Lastname</th></thead><tbody>{{#each}}<tr {{action 'navigateTo' this}}><td>{{ name }}</td><td>{{ lastname }}</td></tr>{{/each}}</tbody><table>");

(function() {
  var attr, tracker;
  tracker = Ember.Application.create({
    LOG_TRANISITIONS: true,
    LOG_VIEW_LOOKUPS: true
  });
  tracker.ApplicationAdapter = DS.RESTAdapter.extend({
    namespace: "data"
  });
  attr = DS.attr;
  tracker.Router.map(function() {
    this.route("userIndex", {
        path: "/user"
    });
    return this.route("userEdit", {
        path: "/user/:id"
    });
  });
  tracker.User = DS.Model.extend({
    name: attr("string"),
    lastname: attr("string")
  });
  tracker.Workout = DS.Model.extend({
    date: attr("string"),
    description: attr("string")
  });
  tracker.UserIndexRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find("user");
    },
    actions: {
        navigateTo: function(user) {
            return this.transitionTo("userEdit", user.id);
        }
    }
  });
  tracker.UserEditRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find("user", params.id);
    }
  });
}).call(this);

When navigating to the /user path it correctly displays the userIndex template with the list of users. If I then click on the link to go to /user/1 it loads the userEdit form above the userIndex template without removing the userIndex template. If I then click back the userEdit form is replaced by the userIndex template but the old one is still there so I end up with the table twice. I can repeat this ad infinitum and end up with multiple tables.

Apologies if this is unclear but it's quite difficult to explain.

Thanks

Answer 1

lindsey-s on IRC in #emberjs informed me this can sometimes happen when there is a missing closing tag element. Sure enough i went over my templates with a fine toothed comb and found a missing closing div tag! Fixed that, and the issue went away!