过渡到不同路线时，Ember 模板不会删除答案

【问题标题】：Ember template does not remove when transition to different route过渡到不同路线时，Ember 模板不会删除
【发布时间】：2014-04-24 20:08:20
【问题描述】：

我觉得这是一个很容易解决的问题，我只是不知道如何解决它。目前我有一个显示如下模板的插座：

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>

要在插座上渲染的模板是这样的：

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>

当我第一次访问用户路由时，由于没有点击按钮，所以插座不显示。该按钮连接到负责操作的控制器。该操作只是过渡到模板在出口处显示的路线。它看起来和预期的一样，但是当我点击不同的用户模型时，前一个用户的插座仍然存在，<div class="panel-body"> </div> 中没有所有内容。因此 Ember 在转换时隐藏了面板主体 div，但不隐藏用户编辑 div。如果您需要更多信息，我很乐意提供。

这里是控制器：用户控制器：

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

这里是用户编辑控制器：

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

【问题讨论】：

你会显示转换代码吗，最好显示两个控制器，路由器也可能有帮助，并命名模板:)
您可以使用 emberjs.jsbin.com 并重新创建问题...

标签： ember.js handlebars.js

【解决方案1】：

嗨，你为什么不使用 {{#link-to 'edit' model}} 而不是 action ??? 您可以将模型传递给链接到，因此您不必在控制器中获取模型然后transitionToRoute

Look at this

【讨论】：