TransitionToWithMultipleDynamicSegments

mirage.config.js

import Ember from 'ember';

export default function () {
  window.server = this;

  this.get('/categories');
  
  this.get('/categories/:id');
  
  this.get('/posts');
  
  this.get('/posts/:id');
  
  this.get('/words');
  
  this.get('/words/:id');

}

mirage.factories.category.js

import { Factory, faker } from 'ember-cli-mirage';

export default Factory.extend({

  name(i) {
    return `Category ${i+1}`;
  },
  
  description: 'This is the description',
  
  afterCreate(category, server) {
    server.createList('post', 5, { category });
  }
  
});

mirage.factories.post.js

import { Factory, association } from 'ember-cli-mirage';

export default Factory.extend({

  name(i) {
    return `Post ${i+1}`;
  },
  
  afterCreate(post, server) {
    let qty = Math.floor(Math.random() * 10) + 3 ;
    server.createList('word', qty, { post });
  }
  
});

mirage.factories.word.js

import { Factory, faker, association } from 'ember-cli-mirage';

export default Factory.extend({

  text(i) {
    return faker.random.word();
  }
  
});

mirage.models.category.js

import { Model, hasMany } from 'ember-cli-mirage';

export default Model.extend({
  
  posts: hasMany()
  
});

mirage.models.post.js

import { Model, hasMany, belongsTo } from 'ember-cli-mirage';

export default Model.extend({
  
  category: belongsTo(),
  words: hasMany()
  
});

mirage.models.word.js

import { Model, belongsTo } from 'ember-cli-mirage';

export default Model.extend({
  
  post: belongsTo()
  
});

mirage.scenarios.default.js

export default function(server) {

  //let category = server.create('category');
  //server.createList('post', 10, { category });
  
  server.createList('category', 5);
  //server.createList('post', 4);
  //server.createList('word', 10);

};

models.category.js

import DS from 'ember-data';

export default DS.Model.extend({
  
  name: DS.attr('string'),
  description: DS.attr('string'),
  posts: DS.hasMany('post'),
  
  isUrgent: Ember.computed('posts.[]', function () {
    let promise = this.get('posts').then(posts => Ember.RSVP.all(posts.map(post => post.get('isUrgent'))).then((values) => values.some((prop) => prop === true)));
    return DS.PromiseObject.create({
      promise
    });
  })
  
});

models.post.js

import DS from 'ember-data';

export default DS.Model.extend({
  
  name: DS.attr('string'),
  category: DS.belongsTo('category'),
  words: DS.hasMany('word'),
  
  //status: 'urgent',
  status: 'notUrgent',
  
  isUrgent: Ember.computed.equal('status', 'urgent')
  
});

models.word.js

import DS from 'ember-data';

export default DS.Model.extend({
  
  post: DS.belongsTo('post'),
  text: DS.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('home', {path: '/'});
  this.route('categories', {path: 'categories'});
  this.route('category', {path: ':category_id'});
  this.route('posts', {path: 'posts'});
  this.route('post', {path: 'post/:category_id/:post_id'});
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  
	actions: {
    goToPost() {
      let post = this.store.findRecord('post', 1);
      this.transitionTo('post', 1,2);
    }
  }
  
});

routes.categories.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
    return this.store.findAll('category');
  }
  
});

routes.category.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model(params) {
    return this.store.findRecord('category', params.id);
  }
  
});

routes.post.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model({post_id,category_id}) {
    //console.log(' params ',params);
    return this.store.findRecord('post', post_id);
  },
  
  /*
  serialize(model) {
    console.log('model in serialize():', model);
    return { category_id: model.get('category.id'), post_id: model.id };
  }
  */
  
});

routes.posts.js

import Ember from 'ember';

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

});

templates.application.hbs

<h1>Welcome!</h1>

{{nav-bar}}

<br><br>
<button type="button" {{action 'goToPost'}}>GoToPost with action (transitionTo)</button>

{{outlet}}

templates.categories.hbs

<h1>Categories!</h1>

{{#if model.isPending}}
	<div style="background-color:green; padding:50px">Loading...</div>
{{else}}
  {{#each model as |category|}}
    <div>Category {{category.id}}: {{#link-to 'category' category.id}}{{category.name}}{{/link-to}}</div>
  {{else}}
    <div style="background-color:red; padding:50px">No Categories.</div>
  {{/each}}
{{/if}}

templates.category.hbs

<h1>{{model.name}}:</h1>

Description: <b>{{model.description}}</b><br><br>
isUrgent.content: <b>{{model.isUrgent.content}}</b><br><br>
isUrgent.isPending: <b>{{model.isUrgent.isPending}}</b><br><br>
model.posts.isPending: <b>{{model.posts.isPending}}</b><br><br>

<button disabled={{if model.posts.isPending true model.isUrgent}}>I need to be disabled from beginning and if model.isUrgent true</button><br><br>

{{#if model.posts.isPending}}
	<div style="background-color:green; padding:50px">Loading...</div>
{{else}}
  {{#each model.posts as |post|}}
    <div>Post {{post.id}}: {{#link-to 'post' post.id}}{{post.name}}{{/link-to}} ({{post.words.length}} words)</div>
  {{else}}
    <div style="background-color:red; padding:50px">No posts in this category.</div>
  {{/each}}
{{/if}}

templates.components.nav-bar.hbs

{{link-to 'Home' "home"}} | {{link-to 'Categories' "categories"}} | {{link-to 'Posts' "posts"}}
<hr>

templates.post.hbs

<h1>{{model.name}}:</h1>

id: <b>{{model.id}}</b><br>
name: <b>{{model.name}}</b><br>
tempNumber: <b>{{model.tempNumber}}</b>

templates.posts.hbs

<h1>Posts!</h1>

{{#if model.isPending}}
	<div style="background-color:green; padding:50px">Loading...</div>
{{else}}
  {{#each model as |post|}}
    <div>Post {{post.id}}: {{#link-to 'post' post.category.id post.id}}{{post.name}}{{/link-to}} ({{post.words.length}} words)</div>
  {{else}}
    <div style="background-color:red; padding:50px">No Posts.</div>
  {{/each}}
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.13.2",
    "ember-cli-mirage": "0.3.3"
  }
}