如何在Ember中替換當前的車把模板

Question

我正在開發一個簡單的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以獲得完整示例。

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