New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.posts.post.js

import Ember from 'ember';

export default Ember.Controller.extend({
  draft: Ember.inject.service(),
  actions:{
  	delete(comment){
      const id = this.get('model.id');
      const draft = this.get('draft.comments');
      if(!this.get(`draft.comments.${this.get('model.id')}`)){
      	draft[id] = [];
      }
    	draft[id].pushObject(comment);
      this.get('model.comments').removeObject(comment);
    },
    undo(){
      const id = this.get('model.id');
      const draft = this.get('draft.comments');
    	draft[id].forEach(comment => {
      	this.get('model.comments').pushObject(comment);
      });
      this.set(`draft.comments.${id}`,[]);
    }
  }
});

models.comment.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  post: belongsTo('post'),
  body: attr('string')
});

models.post.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  comments: hasMany('comment'),
  title: attr('string'),
  body: attr('string')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('posts', function(){
  	this.route('post', {path:':id'});
  });
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel(){
  	const store = this.get('store');
    let post1 = store.createRecord('post',{
      id: '1',
      title: 'Post 1',
      body: 'Body of the post 1'
    });
    let comment1 = store.createRecord('comment',{
    	id: '1',
      body: 'comment 1 of the post 1'
    });
    let comment2 = store.createRecord('comment',{
    	id: '2',
      body: 'comment 2 of the post 1'
    });
    post1.get('comments').pushObject(comment1);
    post1.get('comments').pushObject(comment2);
    
    let post2 = store.createRecord('post',{
      id: '2',
      title: 'Post 2',
      body: 'Body of the post 2'
    });
    let comment3 = store.createRecord('comment',{
    	id: '3',
      body: 'comment 1 of the post 2'
    });
    let comment4 = store.createRecord('comment',{
    	id: '4',
      body: 'comment 2 of the post 2'
    });
    
    
    post2.get('comments').pushObject(comment3);
    post2.get('comments').pushObject(comment4);
  }
});

routes.posts.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
  	return this.get('store').peekAll('post');
  }
});

routes.posts.post.js

import Ember from 'ember';

export default Ember.Route.extend({
   model(params){
  	return this.get('store').peekRecord('post', params.id);
  }
});

services.draft.js

import Ember from 'ember';

export default Ember.Service.extend({
  comments:[]
});

templates.application.hbs

{{outlet}}

templates.index.hbs

{{#link-to "posts"}}posts{{/link-to}}

templates.posts.hbs

{{outlet}}

templates.posts.index.hbs

<h4>Posts</h4>
{{#each model as |post|}}
	{{#link-to "posts.post" post.id}}{{post.title}}<br>{{/link-to}}
{{/each}}

templates.posts.post.hbs

{{#link-to "posts"}}back{{/link-to}}
<h4>Post + comments</h4>
<h5>{{model.title}}</h5>
<p>{{model.body}}</p>
<hr>
<button onclick={{action 'undo'}}>undo</button>
<h6>comments</h6>
{{#each model.comments as |comment|}}
	{{comment.body}}<button onclick={{action 'delete' comment}}>x</button><br>
{{/each}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}