I am working on a simple Ember CRUD app and ran into an issue swapping a "display" template with an "edit" template. Here is my route configuration:
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');
});
});
});
The follow template displays my model. I want the link-to to replace the display template with the edit template:
<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>
Unfortunately when a user clicks the #link-to "contacdt.edit"
, the view is rendered in the {{outlet}} (I only added the {{outlet}} for debugging). The edit template also doesn't seem to bind correctly to the current model.
Please see this jsfiddle for a complete example.