2013-10-25 45 views
0

我正在研究一个简单的Ember CRUD应用程序,并遇到了交换具有“编辑”模板的“显示”模板的问题。这里是我的路线配置:如何替换Ember中的当前把手模板

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",认为在{{口}}(我只加了{{出口呈现}}进行调试)。编辑模板似乎也没有正确绑定到当前模型。

请参阅此jsfiddle的完整示例。

回答

4

默认情况下,模板呈现在父模板的主插口中。您的contact.edit模板的contact作为父模板,因为您的路线层次结构。并且您需要在contacts模板内进行渲染。

您可以从App.ContactEditRoute覆盖renderTemplate方法,以获得所需的行为:模板渲染http://emberjs.com/guides/routing/rendering-a-template/

这里

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://jsfiddle.net/marciojunior/y58vB/

小提琴