Ember : Two route for one template

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

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.

Answer 2

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.