Skip to content

Instantly share code, notes, and snippets.

@BenjaminBeck
Forked from vigneshrajarr/controllers.application.js
Last active January 15, 2019 04:46
Show Gist options
  • Save BenjaminBeck/4a907b966d0c071ba214ab0fe1e679f6 to your computer and use it in GitHub Desktop.
Save BenjaminBeck/4a907b966d0c071ba214ab0fe1e679f6 to your computer and use it in GitHub Desktop.
demo ember-models-table async filter/sort
import DS from "ember-data";
export default DS.RESTAdapter.extend({
//namespace: 'api',
host: 'https://jsonplaceholder.typicode.com',
//coalesceFindRequests: true
handleResponse: function handleResponse(status, headers, payload, requestData) {
let result = this._super(...arguments);
result = {album: result}
return result;
},
});
import DS from "ember-data";
export default DS.RESTAdapter.extend({
//namespace: 'api',
host: 'https://jsonplaceholder.typicode.com',
//coalesceFindRequests: true
handleResponse: function handleResponse(status, headers, payload, requestData) {
let result = this._super(...arguments);
console.log(result);
return result;
},
});
import DS from "ember-data";
export default DS.RESTAdapter.extend({
//namespace: 'api',
host: 'https://jsonplaceholder.typicode.com',
//coalesceFindRequests: true
handleResponse: function handleResponse(status, headers, payload, requestData) {
let result = this._super(...arguments);
for(let i=0; i<result.length; i++){
result[i]["album"] = {
id: Math.floor(Math.random() * 100) + 1,
//id: result[i]["albumId"],
type: 'album'
}
}
result = {photo: result}
return result;
},
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Controller.extend({
store: Ember.inject.service(),
columns: [
{propertyName: 'id', title: 'id as string', className:'small-col'},
{propertyName: 'idSortable', title: 'is as integer', className:'small-col'},
{propertyName: 'title'},
{propertyName: 'numberOfPhotos', title:'Number of Photos (1)'},
{propertyName: 'numberOfPhotos', title:'Number of Photos (2)', component:'table/cell-number-of-photos', sortedBy:'numberOfPhotos'}
],
photos: Ember.computed(function(){
let result = this.store.findAll('photo');
console.log('photos', result);
return result;
})
});
import DS from "ember-data";
export default DS.Model.extend({
title: DS.attr('string'),
photos: DS.hasMany('photos'),
idSortable: Ember.computed('id', function(){
let id = this.get('id');
return parseInt(id);
}),
numberOfPhotos: Ember.computed('photos.[]', async function(){
let photos = await this.get('photos');
return photos.length;
})
});
import DS from "ember-data";
export default DS.Model.extend({
title: DS.attr('string'),
url: DS.attr('string'),
thumbnailUrl: DS.attr('string'),
album: DS.belongsTo('album')
});
import Ember from 'ember';
import DS from "ember-data";
export default Ember.Route.extend({
model: async function() {
let photos = this.store.findAll('photo');
let result = await this.store.findAll('album');
console.log(result);
return result;
}
});
import DS from "ember-data";
export default DS.RESTSerializer.extend();
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
table, tr, th, td
{
border:1px solid #000;
}
th
{
cursor:pointer;
}
<h3>Example that sorting ember-models-table by async values (promises) does not work</h3>
<pre style="padding: 15px;">
Column "Number of Photos (1)" does directly display the promise-object from the async-function.
In column "Number of Photos (2)" a custom component (table/cell-number-of-photos.hbs) renders the promise by using ember-promise-helpers´s async-function.
Sorting and filtering does not work for this two columns.
</pre>
{{#if model.isPending}}
<p>Loading albums...</p>
{{else}}
{{models-table data=model columns=columns}}
{{/if}}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.small-col{
width: 30px;
}
</style>
{{outlet}}
{{yield}}
{{await record.numberOfPhotos}}
{
"version": "0.14.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js",
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "2.18.2",
"ember-template-compiler": "2.18.2",
"jquery-mockjax": "https://cdn.jsdelivr.net/gh/jakerella/jquery-mockjax/dist/jquery.mockjax.js"
},
"addons": {
"ember-promise-helpers": "1.0.5",
"ember-data": "2.18.5",
"ember-models-table": "2.9.0-beta.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment