Skip to content

Instantly share code, notes, and snippets.

@wuarmin
Last active November 22, 2018 10:58
Show Gist options
  • Save wuarmin/310f41de6940c5bb6624abbf6b1fd2f5 to your computer and use it in GitHub Desktop.
Save wuarmin/310f41de6940c5bb6624abbf6b1fd2f5 to your computer and use it in GitHub Desktop.
sort_by_asnc_relationship_property
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Videos'
});
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');
})
});
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"
}
}
}
}
};
});
}
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')
});
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})
});
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;
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.get('store').findRecord('user', params.user_id);
}
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.get('store').query('video', {
limit: 8
});
}
});
<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>
<h2>User Page</h2>
Name: {{model.name}}
<br/>
{{model.name}}'s Videos
<ul>
{{#each model.videos as |video|}}
<li>{{video.name}}</li>
{{/each}}
</ul>
<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>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment