sort_by_asnc_relationship_property

controllers.application.js

import Ember from 'ember';

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

controllers.videos.index.js

import Ember from 'ember';
import { computed } from '@ember/object';

export default Ember.Controller.extend({
  
  sortedVideos: computed('model.@each.myUser.name', function() {
  	return this.get('model').sortBy('myUser.name');
  })
});

mirage.config.js

import Mirage from 'ember-cli-mirage';
import Ember from 'ember';
export default function() {
  
  this.get('/videos', function(db, request) {
    
    let videos = [
      { id: '1', name: 'Die Hard 1', userId: '1' },
      { id: '2', name: 'Die Hard 2', userId: '2' },
      { id: '3', name: 'Die Hard 3', userId: '1' },
      { id: '4', name: 'Die Hard 4', userId: '3' },
      { id: '5', name: 'Die Hard 5', userId: '4' },
      { id: '6', name: "Jack's Bicycle", userId: '4' },
      { id: '7', name: 'Flight of the Phoenix', userId: '4' },
      { id: '8', name: 'The Hunt for Red October', userId: '1' }

    ];
    
    if(request.queryParams.user_id) {
      return {
        data: videos.filterBy('userId', request.queryParams.user_id).map((video) => {
          return {
            type: 'videos',
            id: video.id,
            attributes: { name: video.name },
            relationships: { "my-user": { data: { type: "users", id: video.userId } } }
          }
        })
      };

    }
    else {
      return {
        data: videos.map((video) => {
          return {
            type: 'videos',
            id: video.id,
            attributes: { name: video.name },
            relationships: { "my-user": { data: { type: "users", id: video.userId } } }
          }
        })
      }
    }
  });

  this.get('/users/1', function() {
    return {
      data: {
        type: 'users',
        id: '1',
        attributes: {
          name: 'John McTiernan',
        },
        relationships: {
          videos: {
            links: {
              related: "/videos?user_id=1"
            }
          }
        }
      }
    };
  });
  
  this.get('/users/2', function() {
    return {
      data: {
        type: 'users',
        id: '2',
        attributes: {
          name: 'Renny Harlin',
        },
        relationships: {
          videos: {
            links: {
              related: "/videos?user_id=2"
            }
          }
        }
      }
    };
  });
  
    this.get('/users/3', function() {
    return {
      data: {
        type: 'users',
        id: '3',
        attributes: {
          name: 'Len Wiseman',
        },
        relationships: {
          videos: {
            links: {
              related: "/videos?user_id=3"
            }
          }
        }
      }
    };
  });
  
    this.get('/users/4', function() {
    return {
      data: {
        type: 'users',
        id: '4',
        attributes: {
          name: 'John Moore',
        },
        relationships: {
          videos: {
            links: {
              related: "/videos?user_id=4"
            }
          }
        }
      }
    };
  });
  
}

models.user.js

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

export default Model.extend({
  name: attr('string'),
  videos: hasMany('video')
});

models.video.js

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

export default Model.extend({
  name: attr('string'),
  myUser: belongsTo('user', {async: true})
});

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('videos', function() {});

  this.route('users', function() {
    this.route('show', { path: '/:user_id' });
  });
});

export default Router;

routes.users.show.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.get('store').findRecord('user', params.user_id);
  }
});

routes.videos.index.js

import Ember from 'ember';

export default Ember.Route.extend({
	model() {
		return this.get('store').query('video', {
      limit: 8
    });
	}
});

templates.application.hbs

<h1>{{appName}} App</h1>
<h3>Check out All Videos to see sorting relationship-issue</h3>
<br>
{{#link-to "videos.index"}}All Videos{{/link-to}}
{{outlet}}
<br>
<br>

templates.users.show.hbs

<h2>User Page</h2>
Name: {{model.name}}
<br/>
{{model.name}}'s Videos

<ul>
	{{#each model.videos as |video|}}
  	<li>{{video.name}}</li>
  {{/each}}
</ul>

templates.videos.index.hbs

<h2>Videos</h2>
<h3>Videos should be sorted by user's(director's) name</h3>
<h4>See controllers/videos/index</h4>

<ul>
  {{#each sortedVideos as |video|}}
    <li>{{video.name}} (
    {{#link-to "users.show" video.myUser.id}}
    	{{video.myUser.name}}
    {{/link-to}})</li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.13.0",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3",
    "ember-cli-mirage": "0.4.1"
  }
}