Ember Concurrency Task Model / Nested Routes

controllers.application.js

import Ember from 'ember';

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

controllers.blog.comments.js

import Ember from 'ember';

export default Ember.Controller.extend({
  comments: Ember.computed.or('model.{comments,previousComments}.value'),
  isLoading: Ember.computed.reads('model.comments.isRunning'),
  error: Ember.computed.reads('model.comments.error')
});

controllers.blog.js

import Ember from 'ember';

export default Ember.Controller.extend({
  blog: Ember.computed.or('model.{blog,previousBlog}.value'),
  isLoading: Ember.computed.reads('model.blog.isRunning'),
  error: Ember.computed.reads('model.blog.error')
});

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('blog',{path:"/blog/:blog_id"}, function (){
    this.route('comments', {path:"/comments"});
  });
});

export default Router;

routes.blog.comments.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

export default Ember.Route.extend({
  model: function (params){
    return {
      previousComments: this.get('commentsTask.lastSuccessful'),
      comments: this.get('commentsTask').perform()
    };
  },

  commentsTask: task(function *(){
    let blog = yield this.modelFor('blog').blogTask;
    yield timeout(1000);
    let comments = [{title:"I love this blog!"}, {title:"I hate this blog!"}];
    console.log("comments:", comments);
    return comments;
  })
  .keepLatest()
  .cancelOn('deactivate')
});

routes.blog.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

export default Ember.Route.extend({
  model: function (){
    
    return {
      previousBlog: this.get('blogTask.lastSuccessful'),
      blog: this.get('blogTask').perform()
    };
  },
  
  blogTask: task(function *(){
    yield timeout(1000);
    let blog = {title: "This is a great Blog Post!"};
    console.log(blog);
    return blog;
  })
  .keepLatest()
  .cancelOn('deactivate')
});

templates.application.hbs

<h1>Ember Concurrency With Nested Models</h1>
<br>
{{#link-to "blog" 1}} BLOG {{/link-to}}<br>
{{#link-to "blog.comments" 1}} COMMENTS {{/link-to}}
<br>
{{outlet}}
<br>
<br>

templates.blog.comments.hbs

<br><br>
Comments:
{{#if isLoading}}
  LOADING COMMENTS...
{{else}}
  {{#each comments as |aComment|}}
    {{aComment.title}}<br>
  {{/each}}
{{/if}}  

templates.blog.hbs

{{#if isLoading}}
LOADING BLOG POST...
{{else}}
   Blog Title:{{blog.title}}<br>
{{/if}}
{{outlet}}

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-concurrency": "latest"
  }
}