EmberJS: Displaying an Edit/Create form without having to transition to a new URL?

Question

I have a simple app. In the app, there is a 'stack' resource that loads in another resource, called 'card', and in turn, the 'card' resource has CRUD routes, in effect:

App.Router.map(function(){
     this.resource('stack', {path:'/stack'},function(){
              this.resource('card',{path:'/card'},function(){
                         this.route('edit',{path:'/edit'}); // for simplicity, let's only assume the edit operation for this
              });
     });
});

The Stack route actually loads the 'Cards' model, something like this:

App.StackRoute = Ember.Route.extend({
         model:function(){
             return this.store.find('cards');
         }

});

Each of the above works fine, rendering at the URLs as expected. However, I don't wish to have separate URLs for the CRUD operations since it doesn't gel well with the flow of my app and is actually counterintuitive to me to transition into a separate URL. I want to be able to view, edit and delete the 'card' model all from within the 'stack' model in itself. Ember, however, doesn't seem to provide this kind of an alternative, almost requiring me to adhere to its ways.

Does anybody have a solution to this? The only other possibility I could think of was to use 'Ember components'.

Answer 1

Yeah, you can just modify the current template based on an editing property.

http://emberjs.jsbin.com/uwENUbeh/3/edit

Answer 2

You can fine tune editing for individual cards. jsbin