Ember : Two route for one template - ember.js

Question

I'm new with Ember and i try to make a simple CRUD.
I want a single template for adding and editing of an object.
This is my code :
this.route('foos', {path: '/foos_path'}, function() {
this.route('edit',{path: '/edit/:foo_id'});
this.route('add',{path: '/add'});
this.route('index');
});
The add function work great but i can't make working the edit function.
This is my edit route.
import Ember from 'ember';
export default Ember.Route.extend({
title : '',
model: function(params) {
this.store.find('foo', params.foo_id).then(function(foo) {
console.log(this, this.get('title'));
this.set('title', foo.title);
});
},
renderTemplate: function() {
this.render('foos.add', {
into: 'foos',
controller: 'foos.add'
});
this.render('foos/add');
}
});
Any help would be great :)

Answer 1

what you need is to extend your adding controller like this, instead of using the same route.
import Ember from 'ember';
import Controller from 'dir/controllers/projects/editController';
// Add controller
export default Controller.extend({
});
the edit and add template could both look like this
{{!-- your add controller can overwrite your editController objects --}}
{{view 'navbar' navbarParams=controllerRelatedObject}}
{{partial "someform"}}
<button {{action 'makeEdit' object1 object2}} class="btn btn-default"> Save </button>
And the edit controller would be handling the makeEdit
// Edit controller
actions: {
makeEdit : function(givenObject, wantedObject){
Ember.RSVP.all(givenObject.invoke('save)).then(...)
},
}
Hope this helps.

Answer 2

Sorry for the delay and thank for you answer. This is how i've achieved my goal :
AddRoute :
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.createRecord('foo');// This line is need to load a clean model into the template
},
});
EditRoute :
import Ember from 'ember';
export default Ember.Route.extend({
controllerName : 'foos.add', // Defines addController for edit route
templateName : 'foos.add', // Defines AddTemplete for edit route
model: function(params) {
return this.store.find('foo', params.foo_id); // Loads the foo object inside the template
}
});
My addTemplate looks like this :
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
{{input placeholder="Foo name" id="foo_name" type="text" class="validate" value=model.title}}
<label for="foo_name"></label>
</div>
<div class="row">
<button class="btn waves-effect waves-light col s12" type="submit" name="save" {{action 'add'}}>Submit
<i class="mdi-content-send right"></i>
</button>
</div>
</div>
</form>
</div>
And in my controller, i define the save action (Can be defined in route instead):
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
save: function() {
// The following is not needed now because we load a record on add and edit route.
/*var foo = this.store.createRecord('foo', {
title : this.get('title')
});*/
// We can instead save the record directly
this.get('model').save().then(function() {
console.log('Foo save.');
}).catch(function(error) {
console.log('Error : ' + error);
});
},
}
});
I hope this will help someone.