Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mhadaily/d10d8ae1cacc1fb0209c215cbd29ce1c to your computer and use it in GitHub Desktop.
Save mhadaily/d10d8ae1cacc1fb0209c215cbd29ce1c to your computer and use it in GitHub Desktop.
Demo Query Params
import Ember from 'ember';
export default Ember.Controller.extend({
})
import Ember from 'ember';
export default Ember.Controller.extend({
queryParams:['page', 'limit'],
page: 0,
limit: 3,
actions: {
nextPage: function() {
this.set('page',this.get('page') + 1)
console.log(this.get('page'))
//how to retrieve data here ?
},
previousPage: function() {
this.set('page',this.get('page') - 1)
//how to retrieve data here ?
}
}
})
import tasks from './fixtures/_tasks'
export default function() {
window.server = this;
this.get('tasks',function(schema, request){
let qp = request.queryParams
let page = parseInt(qp.page)
let limit = parseInt(qp.limit)
let start = page * limit
let end = start + limit
console.log(start, end)
let filtered = tasks.slice(start,end)
console.log(start,filtered)
return {
data: filtered
}
})
//this.get('tasks')
};
export default [
{id: 1, type: 'tasks', attributes: { title: 'Task 1'}},
{id: 2, type: 'tasks', attributes: { title: 'Task 2'}},
{id: 3, type: 'tasks', attributes: { title: 'Task 3'}},
{id: 4, type: 'tasks', attributes: { title: 'Task 4'}},
{id: 5, type: 'tasks', attributes: { title: 'Task 5'}},
{id: 6, type: 'tasks', attributes: { title: 'Task 6'}},
{id: 7, type: 'tasks', attributes: { title: 'Task 7'}},
{id: 8, type: 'tasks', attributes: { title: 'Task 8'}},
{id: 9, type: 'tasks', attributes: { title: 'Task 9'}},
{id: 10, type: 'tasks', attributes: { title: 'Task 10'}},
{id: 11, type: 'tasks', attributes: { title: 'Task 11'}},
{id: 12, type: 'tasks', attributes: { title: 'Task 12'}}
]
export default [
{title: 'Task 1'},
{title: 'Task 2'},
{title: 'Task 3'},
{title: 'Task 4'},
{title: 'Task 5'},
{title: 'Task 6'},
{title: 'Task 7'},
{title: 'Task 8'},
{title: 'Task 9'},
{title: 'Task 10'},
{title: 'Task 11'},
{title: 'Task 12'}
];
import { Model } from 'ember-cli-mirage';
export default Model.extend({
});
export default function(server) {
window.server = server;
server.create('task');
}
export default DS.Model.extend({
title: DS.attr('string')
});
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none'
});
Router.map(function() {
this.route('tasks')
});
export default Router;
import Ember from 'ember';
export default Ember.Route.extend({
queryParams: {
page: {
refreshModel: true
}
},
model: function(params) {
return this.store.query('task', {
page: params.page,
limit: params.limit
});
}
});
{{link-to 'tasks' 'tasks'}}<br>
{{outlet}}
<button {{action 'nextPage'}}>Next</button>
<button {{action 'previousPage'}}>Previous</button>
Current Page:{{page}}
<hr/>
Tasks: {{model.length}}
<hr/>
<ul>
{{#each model as |task|}}
<li>{{task.title}}</li>
{{/each}}
</ul>
{
"version": "0.8.0",
"ENV": {
"ember-cli-mirage": {
"enabled": true
}
},
"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.5.1",
"ember-data": "2.5.2",
"ember-template-compiler": "2.5.1"
},
"addons": {
"ember-cli-mirage": "0.2.0-beta.8"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment