[英]How to Replace the Current Handlebars Template in Ember
我正在开发一个简单的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以获得完整示例。
默认情况下,模板在父模板的主出口中呈现。 由于路由层次结构,您的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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.