如何在 Ember 中替换当前的把手模板答案

【问题标题】：How to Replace the Current Handlebars Template in Ember如何在 Ember 中替换当前的把手模板
【发布时间】：2013-10-25 21:30:32
【问题描述】：

我正在开发一个简单的 Ember CRUD 应用程序，但在将“显示”模板与“编辑”模板交换时遇到了问题。这是我的路线配置：

App.Router.map(function(){ //map URLs to templates
   this.resource('contacts',{path: '/contacts'}, function(){
       this.resource('contact', {path: '/contact/:contact_id'}, function(){
           this.route('edit');
           this.route('create');
           this.route('delete');
       });
   });
});

以下模板显示了我的模型。我希望链接将显示模板替换为编辑模板：

<script type="text/x-handlebars" data-template-name="contact">
        <h3>{{ firstName }} {{ lastName }}</h3>
        <h4>Contact Details</h4>
            {{ email }} 
        <br/>
        {{ phone }}
        <br/>
        {{#link-to "contact.edit" this}}edit{{/link-to}}
</script>

不幸的是，当用户单击#link-to "contacdt.edit" 时，视图呈现在 {{outlet}} 中（我只添加了 {{outlet}} 用于调试）。编辑模板似乎也没有正确绑定到当前模型。

有关完整示例，请参阅此jsfiddle。

【问题讨论】：

标签： ember.js

【解决方案1】：

默认情况下，模板会在父模板的主出口中呈现。由于您的路由层次结构，您的 contact.edit 模板将 contact 作为父模板。您需要在contacts 模板内进行渲染。

您可以覆盖App.ContactEditRoute 中的renderTemplate 方法，以获得所需的行为：

App.ContactEditRoute = Em.Route.extend({
    model: function (params) {
        return this.store.find(App.Contact, params.contact_id);
    },
    actions: {
        save: function () {
            var newContact = this.modelFor('contact.edit');
            this.transitionTo('contact', newContact);
        }
    },
    renderTemplate: function() {
        this.render('contact.edit', { into: 'contacts' })
    }
});

这是模板渲染的文档http://emberjs.com/guides/routing/rendering-a-template/

这是更新代码http://jsfiddle.net/marciojunior/y58vB/的小提琴

【讨论】：