Ember template does not remove when transition to different route

Question

I feel as if this is a very simple problem to fix I am just not aware of how to fix it. Currently I have an outlet that displays a template like this:

user.hbs:

<div id="user-profile">
<img {{bind-attr src="avatarURL"}} alt="User's Avatar" class="profilePic"/>
<h2>{{name}}</h2>
<span>{{email}}</span>
<p>{{bio}}</p>
<span>Created {{creationDate}}</span>
<button {{action "edit"}}>Edit</button>
{{outlet}}
</div>

The template to be rendered at the outlet is this:

user_edit.hbs:

<div id="user-edit">
    <h3>Edit User</h3>
    <div class="panel-body">
        <div class="row">
            <label class="edit-user-label">Choose user avatar</label>
            {{input class="form-control" value=avatarUrl}}
        </div>
        <div class="row">
            <label>User name</label>
            {{input class="form-control" value=name}}
        </div>
        <div class="row">
            <label class="edit-user-label">User email</label>
            {{input class="form-control" value=email}}
        </div>
        <div class="row">
            <label class="edit-user-label">User short bio</label>
            {{textarea class="text-control" value=bio}}
        <div>
        <div class="row">
            <button {{action "save"}}>SAVE</button>
            <button {{action "cancel"}}>CANCEL</button>
        </div>
    </div>
</div>

When I first visit the user route, the outlet does not display because the button has not been clicked. The button is hooked to a controller which takes care of the action. The action just transitions to the route where the template is displayed at the outlet. It appears just as expected but when I click on a different user model, the outlet from the previous user is still there without everything in the <div class="panel-body"> </div>. So Ember hides the panel-body div on transition but not the user-edit div. If you need more information I will be happy to provide it.

Here are the controllers: userController:

App.UserController = Ember.ObjectController.extend({
    actions: {
        edit: function() {
            this.transitionToRoute('user.edit');
        }
    }
});

Here is the userEditController:

App.UserEditController = Ember.ObjectController.extend({
    actions: {
        save: function() {
            var user = this.get('model');
            user.save();
            this.transitionToRoute('user', user);
        },
        cancel: function() {
            var user = this.get('model');
            this.transitionToRoute('user', user);
        }
    }
})

will you show the transition code, might as well show both controllers, and the router might help as well, and name the templates :) — Kingpin2k

Rigel Rigel · Accepted Answer · 2014-04-25T19:08:17

Hi why dont you use {{#link-to 'edit' model}} instead of action ??? you can pass model to link-to so you dont have to get model in controller and then transitionToRoute

Look at this

Ember template does not remove when transition to different route

1 Answers